Segmented Controls

UI State Switch

A segmented control is a linear set of two or more segments, functioning as buttons to toggle UI state outside of the component itself. This component provides a way for users to select a state from given options, in a more extensive manner than an "on/off” or “true/false” toggle.

Do use

For UI switching between a few defined options (e.g. fuels, time periods, currencies).

When UI context can be understood with short labels.

Don't use

When long titles are needed to explain the content being toggled (e.g. accordions for FAQs).

When many options are possible (e.g. country selection).

When content doesn’t need to change based on choice.

As an input in a form (i.e. use a radio).

Live example

N/A: Native component only.

Availabile platforms

Platform	Available
Figma	v4+
Web (@ovotech/element)	❌
App (@ovotech/element-native)	v4+

How to use it

Accessibility

Segments receive a label based on the title given to them by default, but in the event where more context would be useful, it is possible to set an accessibilityLabel on each segment.

Defining your segments

Segments provide a clear title for UI configuration or content that they relate to, and ideally no more than 3-4 segments should be used. This component works best on a single horizontal line, but caters for multiple lines if more segments are provided.

Segments should be checked on a small device to ensure the labels can comfortably fit.

Setting the width

Segmented controls by default will be responsive and displayed as full width within their container. You can override this by setting inline={true} so that they span the width of their segments
(and any component paddings), in situations where you may want to deprioritise them or sit them beside another UI component.

A supporting property of size=”small” may be useful (segments are “large” by default) in combination as a pattern, which will allow more space in the UI if this is the intention, e.g. for placing a select component beside segmented controls.

Setting a selected segment

Default active segment can be set using the activeSegment property, providing the segment from the array of segments set. The setter function also needs providing, usually a setState function, triggering any other related side-effects as desired.

Properties