Option selector

For when you need to select an option from a list

Expanding

Use the expanding option selector when space is limited, or there are multiple selectors in one view.

Note: This building block is a work in progress and subject to change. Why does this illustration look different?

Tapping on an option selector causes the item to expand, pushing other content in the view downwards and revealing available options. To collapse the option selector, simply tap outside, as with the expansion pattern.

Expanded

Use the expanded option selector when the main goal is simply to select one option from a list.

Note: This building block is a work in progress and subject to change. Why does this illustration look different?

How do I look?

There are two options for the presentation of the option selector, full width or contained. Choose that which fits best with your app’s current view.

Full width list item

Note: This building block is a work in progress and subject to change. Why does this illustration look different?

Contained

Note: This building block is a work in progress and subject to change. Why does this illustration look different?