TileGroup

A TileGroup groups Tiles to let users browse and take action on a group of related items.

Usage

Selected

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.

Controlled

A tile group can have a controlled selected value. In this example, it shows how it is possible to select an option.

Disabled

A tile group can be disabled.

Wrapping

Tiles are automatically wrapped

Number of columns

A tile group can have a number of columns. Default is 3. Here's an example where it's 4.

Props

numberOfColumns?

The number of columns to display the tiles in.

Defaults to 3.
selectionMode?

Whether single or multiple selection is enabled.

Defaults to single.
disallowEmptySelection?

Whether the collection allows empty selection.

Defaults to true.
style?

The inline style for the element. A function may be provided to compute the style based on component state.

orientation?

The orientation of the the toggle button group.

Defaults to 'horizontal'.
selectedKeys?

The currently selected keys in the collection (controlled).

defaultSelectedKeys?

The initial selected keys in the collection (uncontrolled).

isDisabled?

Whether all items are disabled.

children?

The children of the component. A function may be provided to alter the children based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

Migration Notes

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.