---
title: SegmentedControl
category: General
---

```jsx live
render(
  <StackView axis="horizontal" alignment="start" spacing={1}>
    <SegmentedControl
      size="sm"
      segments={['One', 'Two', 'Three']}
      onChange={(selected) => console.log(selected)}
    />
    <SegmentedControl
      size="md"
      segments={['One', 'Two', 'Three']}
      onChange={(selected) => console.log(selected)}
    />
    <SegmentedControl
      size="lg"
      segments={['One', 'Two', 'Three']}
      onChange={(selected) => console.log(selected)}
    />
  </StackView>
)
```

```jsx live
render(
  <Field label="Template" distribution="start">
    <Input placeholder="Template name..." grow={1} />
    <SegmentedControl
      segments={['New', 'Copy']}
      onChange={(selected) => console.log(selected)}
    />
  </Field>
)
```

```jsx live
const statuses = {
  Confirmed: 'success',
  Unconfirmed: 'warning',
  Declined: 'error',
}
render(() => {
  const [activeSegment, setActiveSegment] = React.useState('Unconfirmed')
  return (
    <SegmentedControl
      color={statuses[activeSegment]}
      activeSegment={activeSegment}
      segments={Object.keys(statuses)}
      onChange={(selected) => setActiveSegment(selected)}
    />
  )
})
```

```jsx live
render(
  <SegmentedControl
    color="default"
    segments={[
      { title: 'Table', icon: { name: 'menu' }, tooltip: { title: 'Table' } },
      { title: 'Grid', icon: { name: 'layout' }, tooltip: { title: 'Grid' } },
    ]}
    onChange={(selected) => console.log(selected)}
  />
)
```