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. If the value label is too long, it is recommended to use List Picker instead.

Usage

Use Form Cell with Buttons when the option texts are all short and concise.

Do not use Form Cell with Buttons if the texts are too long and need to be truncated. Use List Picker instead.

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.

Variations

Two-Row

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

Adaptivity

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

Resources

Create
Filter