TileGroup

Alpha component

This component is still a work in progress and may not fully address all design requirements. Its API and properties are subject to change as we refine the design and functionality to better meet user needs.

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

View sourceView on npmReport an issue

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

TileGroup

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.