Segmented Control

View on GitHub

Introduction

A segmented control is a set of two or more button segments. Within the control, all segments are equal in width. A segmented control is often used to switch between views of some data. Use a segmented control only when the options are predefined and are at most 4 options.

Design guidelines

By default the segmented control has a height of 32px (the same as a button). It is possible to change this to any height and the text style and spacing will adjust. You should however keep things on the 8px grid or in some cases the 4px grid. You should only need the following recommended heights.

Recommended heights

  • 24px
  • 32px — default height
  • 36px
  • 40px

Basic

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component
  initialState={{
    options: [
      { label: 'Hourly', value: 'hourly' },
      { label: 'Daily', value: 'daily' },
      { label: 'Monthly', value: 'monthly' },
    ],
    value: 'hourly',
  }}
>
  {({ state, setState }) => (
    <SegmentedControl
      width={240}
      options={state.options}
      value={state.value}
      onChange={value => setState({ value })}
    />
  )}
</Component>
code Hide code

Small SegmentedControl example

The SegmentedControl will automatically chose the text style to match whatever height is passed.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component
  initialState={{
    options: [{ label: 'On', value: 'on' }, { label: 'Off', value: 'off' }],
    value: 'on',
  }}
>
  {({ state, setState }) => (
    <SegmentedControl
      name="switch"
      width={80}
      height={24}
      options={state.options}
      value={state.value}
      onChange={value => setState({ value })}
    />
  )}
</Component>
code Hide code

SegmentedControl Props

This component composes ui-box

optionsarrayOfrequired
The options for the radios of the Segmented Control.
valueunion
The current value of the Segmented Control when controlled.
defaultValueunion
The default value of the Segmented Control when uncontrolled.
onChangefunc
Function called when the value changes.
namestring
The name of the radio group.
heightnumber = 32
The height of the Segmented Control.