A TileGroup groups Tiles to let users browse and take action on a group of related items.
<TileGroup> <Tile /> /* (Required) A tile in a TileGroup */ </TileGroup>
A tile group can have an item initially selected, by using defaultSelectedKeys for uncontrolled or selectedKeys for controlled.
Here's an example where one item is selected using defaultSelectedKeys.
A tile group can have a controlled selected value. In this example, it shows how it is possible to select an option.
A tile group can be read-only.
A tile group can be disabled.
Tiles are automatically wrapped
A tile group can have a number of columns. Default is 3. Here's an example where it's 4.
Tiles are always used in groups. Similarly to Radio, they should:
Unlike Radio, it is not mandatory for Tiles to have a default option selected.
The number of columns to display the tiles in.
Whether single or multiple selection is enabled.
Whether the collection allows empty selection.
Whether the collection is readonly.
The inline style for the element. A function may be provided to compute the style based on component state.
The orientation of the the toggle button group.
The currently selected keys in the collection (controlled).
The initial selected keys in the collection (uncontrolled).
Whether all items are disabled.
The children of the component. A function may be provided to alter the children based on component state.
The CSS className for the element. A function may be provided to compute the class based on component state.
Handler that is called when the selection changes.
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
Coming from Orbiter, you should be aware of the following changes:
align has been removed, use alignItems instead.autoFocus has been removed.disabled has been renamed to isDisabled.inline has been removed.reverse is not supported, use flex-direction or row-reverse instead.onChange has been removed, use onSelectionChange instead.selectionMode type "none" should be undefined instead.defaultValue has been removed.value has been removed.rowSize has been removed.