ListBox
Listbox shows lists
| install | yarn add @react-spectrum/listbox |
|---|---|
| version | 3.0.0-alpha.1 |
| usage | import {ListBox} from '@react-spectrum/listbox' |
Example#
<ListBox width=200 aria-label="label">
<Section title="Justify">
<Item>Left</Item>
<Item>Middle</Item>
<Item>Right</Item>
</Section>
<Section title="Align">
<Item>Top</Item>
<Item>Center</Item>
<Item>Bottom</Item>
</Section>
</ListBox>Content#
Accessibility#
Internationalization#
Events#
Props#
| Name | Type | Default | Description |
autoFocus | boolean | FocusStrategy | — | |
shouldFocusWrap | boolean | — | |
children | ReactElement<SectionProps<T>> | ReactElement<ItemProps<T>> | ReactElement<SectionProps<T>> | ReactElement<ItemProps<T>>[] | (item: T) => ReactElement<SectionProps<T>> | ReactElement<ItemProps<T>> | — | The contents of the collection. |
disabledKeys | Iterable<Key> | — | They item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
items | Iterable<T> | — | Item objects in the collection or section. |
itemKey | string | — | Property name on each item object to use as the unique key. id or key by default. |
isLoading | boolean | — | Whether the items are currently loading. |
selectionMode | SelectionMode | — | The type of selection that is allowed in the collection. |
disallowEmptySelection | boolean | — | Whether the collection allows empty selection. |
selectedKeys | 'all' | Iterable<Key> | — | The currently selected keys in the collection (controlled). |
defaultSelectedKeys | 'all' | Iterable<Key> | — | The initial selected keys in the collection (uncontrolled). |
UNSAFE_className | string | — | |
UNSAFE_style | CSSProperties | — |
Events
| Name | Type | Default | Description |
onLoadMore | () => any | — | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. |
onSelectionChange | (keys: Selection) => any | — | Handler that is called when the selection changes. |
Layout
| Name | Type | Default | Description |
flex | string | number | boolean | — | |
flexGrow | number | — | |
flexShrink | number | — | |
flexBasis | number | string | — | |
alignSelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' | — | |
justifySelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' | — | |
flexOrder | number | — | |
gridArea | string | — | |
gridColumn | string | — | |
gridRow | string | — | |
gridColumnStart | string | — | |
gridColumnEnd | string | — | |
gridRowStart | string | — | |
gridRowEnd | string | — |
Spacing
| Name | Type | Default | Description |
margin | DimensionValue | — | |
marginTop | DimensionValue | — | |
marginLeft | DimensionValue | — | |
marginRight | DimensionValue | — | |
marginBottom | DimensionValue | — | |
marginStart | DimensionValue | — | |
marginEnd | DimensionValue | — | |
marginX | DimensionValue | — | |
marginY | DimensionValue | — |
Sizing
| Name | Type | Default | Description |
width | DimensionValue | — | |
minWidth | DimensionValue | — | |
maxWidth | DimensionValue | — | |
height | DimensionValue | — | |
minHeight | DimensionValue | — | |
maxHeight | DimensionValue | — |
Positioning
| Name | Type | Default | Description |
position | 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' | — | |
top | DimensionValue | — | |
bottom | DimensionValue | — | |
left | DimensionValue | — | |
right | DimensionValue | — | |
start | DimensionValue | — | |
end | DimensionValue | — | |
zIndex | number | — | |
isHidden | boolean | — |
Accessibility
| Name | Type | Default | Description |
role | string | — | |
id | string | — | |
tabIndex | number | — | |
aria-label | string | — | Defines a string value that labels the current element. |
aria-labelledby | string | — | Identifies the element (or elements) that labels the current element. |
aria-describedby | string | — | Identifies the element (or elements) that describes the object. |
aria-controls | string | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
aria-owns | string | — | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
aria-hidden | boolean | 'false' | 'true' | — | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
Visual options#
'first' | 'last'