The form cell with buttons component allows the user to quickly select from a small set of values. It is typically used in the create and edit pattern, or occasionally in the filter pattern.

Structure

A. Label

The label describes the intent of the selection.

B. Buttons

The buttons have a selected state and an unselected state, allowing users to make a selection by tapping on them. Having a value selected in default is highly recommended as it communicates to the user that the buttons are tappable.

Variant

Two-Row

If the label or the values are long, use the two-row variation allow content to be displayed properly.

Regular

In regular width, the form cell with buttons component is displayed in a form sheet, popover or full screen modal.

Resources

Create
Filter