Select

Usage

import {
  Select,
  SelectGroup,
  SelectGroupTitle,
  SelectValue,
  SelectTrigger,
  SelectLabel,
  SelectContent,
  SelectHeader,
  SelectFooter,
  SelectItem,
  SelectSeparator,
} from "@govtechmy/myds-react/select";

export default () => (
  <Select>
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectHeader />
      <SelectGroup>
        <SelectGroupTitle />
        <SelectItem />
      </SelectGroup>
      <SelectSeparator />
      <SelectFooter />
    </SelectContent>
  </Select>
);

Examples

Size

Use the size prop to change the select size! Available sizes are small, medium, and large. By default, the size is small.

Variant

Use the variant prop to change the variant select! Available variants are outline and ghost. By default, the variant is outline.

Disabled

There are many ways to interact with Select disabled state. Select can be disabled entirely by setting the disabled prop to true.

For a finer control on which option to disable, you can define disabled to individual SelectItem!

Grouped Options

Grouped options can be created by using the SelectGroup and SelectGroupTitle components. It allows you to group related options together, creating a more organized and structured select.

With Header

You can add a header to the select by using the SelectHeader component. It allows you to add a header to the select, providing additional context, functionality or information to the user.

With Footer

You can add a footer to the select by using the SelectFooter component. It allows you to add a footer to the select, providing additional context, functionality or information to the user.

Multiple

Select also supports multiple selection. To enable multiple selection, set the multiple prop to true to Select.

Custom Value Display

You can customize the value display by using the SelectValue component. It allows you to customize the value display of the select.

Props

Select

SelectValue

SelectItem