@workday/canvas-kit-docs/dist/mdx/preview-react/select/Select.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 Default from './examples/Top Label/Default';
import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
import Scrollable from './examples/Top Label/Scrollable';
import Disabled from './examples/Top Label/Disabled';
import Caution from './examples/Top Label/Caution';
import Error from './examples/Top Label/Error';
import Grow from './examples/Top Label/Grow';
import DefaultLeft from './examples/Left Label/DefaultLeft';
import DefaultWithCustomOptionsLeft from './examples/Left Label/DefaultWithCustomOptionsLeft';
import DefaultWithSimpleOptionsLeft from './examples/Left Label/DefaultWithSimpleOptionsLeft';
import ScrollableLeft from './examples/Left Label/ScrollableLeft';
import DisabledLeft from './examples/Left Label/DisabledLeft';
import AlertLeft from './examples/Left Label/AlertLeft';
import ErrorLeft from './examples/Left Label/ErrorLeft';
import GrowLeft from './examples/Left Label/GrowLeft';


# Canvas Kit Select <StorybookStatusIndicator type="deprecated" />

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

<br />

## Top Label

### Default

<ExampleCodeBlock code={Default} />

### Default with Custom Options Data

<ExampleCodeBlock code={DefaultWithCustomOptions} />

### Default with Simple Options Data

<ExampleCodeBlock code={DefaultWithSimpleOptions} />

### Scrollable

<ExampleCodeBlock code={Scrollable} />

### Disabled

<ExampleCodeBlock code={Disabled} />

### Alert

<ExampleCodeBlock code={Caution} />

### Error

<ExampleCodeBlock code={Error} />

### Grow

<ExampleCodeBlock code={Grow} />

## Left Label

### Default

<ExampleCodeBlock code={DefaultLeft} />

### Default with Custom Options Data

<ExampleCodeBlock code={DefaultWithCustomOptionsLeft} />

### Default with Simple Options Data

<ExampleCodeBlock code={DefaultWithSimpleOptionsLeft} />

### Scrollable

<ExampleCodeBlock code={ScrollableLeft} />

### Disabled

<ExampleCodeBlock code={DisabledLeft} />

### Alert

<ExampleCodeBlock code={CautionLeft} />

### Error

<ExampleCodeBlock code={ErrorLeft} />

### Grow

<ExampleCodeBlock code={GrowLeft} />