@workday/canvas-kit-docs/dist/mdx/react/segmented-control/SegmentedControl.mdx

Documentation components of Canvas Kit components

import {
  ExampleCodeBlock,
  StorybookStatusIndicator,
  SymbolDoc,
  Specifications,
} from '@workday/canvas-kit-docs';

import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';

import Basic from './examples/Basic';

# Canvas Kit Segmented Control <StorybookStatusIndicator type="deprecated" />

<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
  <InformationHighlight.Icon />
  <InformationHighlight.Body>
    `SegmentedControl` in Main has been deprecated and will be removed in a future major version.
    Please use `Segmented Control` in Preview instead.
  </InformationHighlight.Body>
  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs">
    Segmented Control Docs
  </InformationHighlight.Link>
</InformationHighlight>

A linear set of two or more segments, each of which functions as a mutually exclusive button. This
is a [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

Here is a basic example of a Segmented Control with multiple nested `Button`s. **Note:** while
managing state using a unique `value` for each `Button` child is encouraged, you can also use
indexes and omit the `value` field. It is strongly recommended to not mix these two methods.

<ExampleCodeBlock code={Basic} />

## Component API

<SymbolDoc name="SegmentedControl" fileName="/react/" />