@blueprintjs/core/src/components/segmented-control/segmented-control.mdx

Core styles & components

---
title: Segmented control
---

# Segmented control

A **SegmentedControl** is a linear collection of buttons which allows a user to choose an option from multiple choices,
similar to a [**Radio**](#core/components/radio) group.

Compared to the [**ButtonGroup**](#core/components/button-group) component, **SegmentedControl** has affordances
to signify a selection UI and a reduced visual weight which is appropriate for forms.

## Import

```ts copy
import { SegmentedControl } from "@blueprintjs/core";
```

@reactExample SegmentedControlExample

## Usage

**SegmentedControl** can be used as either a controlled or uncontrolled component with the `value`, `defaultValue`,
and `onChange` props.

Options are specified as `OptionProps` objects, just like [RadioGroup](#core/components/radio.radiogroup) and
[HTMLSelect](#core/components/html-select).

```tsx
<SegmentedControl
    options={[
        {
            label: "List",
            value: "list",
        },
        {
            label: "Grid",
            value: "grid",
        },
        {
            label: "Gallery",
            value: "gallery",
        },
    ]}
    defaultValue="list"
/>
```

## Props interface

@interface SegmentedControlProps