Select

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as SelectStories from './Select.stories';

<Meta of={SelectStories} name='Usage' />

<Title />

## Purpose

The PDS Select with a `bare` variant: no border, fill or container, for a picker that sits inline in a toolbar, such as the model picker in a chat input.

## Usage

- `variant="default"` is the unchanged PDS Select. `variant="bare"` clears the border and fill; the selected value and a chevron sit on the surface. The value is secondary text at rest and default text on hover and while open. The focus ring is the Select's own.
- Bare hides the label (still required, and read by screen readers) and the trigger hugs the selected value, while the list is as wide as its longest option. Set `autoWidth` or `inputWidth` if you want the Select's own width behavior instead.
- Everything else is the Select: `options` (`label`, `value`, optional `icon` and `disabled`), controlled `value` with `onOptionSelect`, or `defaultValue`, and `size` (`s` or `m`).
- It is built on the published Select, so the listbox behavior, the check on the selected option, typeahead and keyboard handling come with it.

## Implementation

See the table below for the available props. The other story shows the bare variant in each size and the disabled state. The unchanged `default` variant is the PDS Select, so it has no story here.

<hr />

<Canvas of={SelectStories.Bare} />
<Controls of={SelectStories.Bare} />