Example
Patterns
Collections
ActionGroup implements the react-stately collection component, <Item>.
Static collections, seen in the example above, can be used when the full list of options is known ahead of time.
Dynamic collections, as shown below, provide an iterable list of items to the component and a render function that returns Item elements.
Selection
Setting a selected item can be done by using the defaultSelectedKeys or selectedKeys prop. The selected key corresponds to the key of an item, where "id" is used by default.
See the react-stately selection docs for more information.
Multiple selection
Use the selectedKeys to control the value of the picker and watch for changes with the onSelectionChange handler, which accepts the selected item’s key as its only argument.
Use the defaultSelectedKeys prop for uncontrolled cases.
Single selection
To limit users to selecting only a single item at a time, selectionMode can be set to "single".
While single selection is enabled it’s recomended to improve affordance with the selectionStyle of "highlight".
Slots
Complex content can be added as children of an item. If a description is added, the prop slot="description" must be used to distinguish it from the primary <Text> label.
Props
Density
The amount of vertical padding that each row contains can be modified by providing the density prop.
Overflow mode
By default, text content that overflows its row will be truncated. You can have it wrap instead by passing overflowMode="wrap" to the list view.