Select

A composable control for choosing one or more options from a list.

#Import

import { Select, SelectToggle, SelectContent, SelectItem } from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Select align="start">
  <SelectToggle>Select a country</SelectToggle>
  <SelectContent width="16rem">
    <SelectItem value="kr">Korea</SelectItem>
    <SelectItem value="us">United States</SelectItem>
  </SelectContent>
</Select>

#Preview

<Select align="start">
  <SelectToggle>Select a country</SelectToggle>
  <SelectContent width="16rem">
    <SelectItem value="kr">Korea</SelectItem>
    <SelectItem value="us">United States</SelectItem>
  </SelectContent>
</Select>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Multiple selection

<Select multi>...</Select>

#Open on hover

<Select hoverOpen>...</Select>

#Trigger spacing

<Select space={16}>...</Select>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.