The fields prop is Rokkit's core concept. Instead of reshaping your data to
match component contracts, you tell components which fields in your data map to which roles.
The Problem
Most UI libraries force you to transform your API data into their expected shape.
If your API returns { name, id } but the component expects { label, key }, you write adapter code everywhere.
The Rokkit Way
Pass a fields object that maps component roles to your data's property names:
Standard Field Roles
| Role | Purpose | Components |
|---|---|---|
text | Display label | All |
value | Unique identifier for selection | All |
icon | Icon class name | List, Menu, Select, Tabs |
children | Nested items | List, Tree, Menu |
description | Secondary text | List, Card |
disabled | Item disabled state | List, Menu, Select |
component | Per-item Svelte component | List |
snippet | Named snippet for per-item rendering | List, Select |
Default Mapping
When no fields prop is provided, Rokkit uses the field names directly. So if
your data already has text and value properties, no mapping is needed.
Primitive Arrays
For arrays of strings or numbers, each item is used as both text and value automatically:
Nested Data
Map the children field for hierarchical data. Groups with children render
as collapsible sections in List and Tree, or as option groups in Select and Menu.