Forms

Select

A custom dropdown picker for option sets, playground controls and compact forms.

Component

06

Import

import { Select } from "@swirski/ui";

Composition

Field
|-- Label
|-- Select
|   `-- options[]
|       |-- value
|       `-- label
`-- FieldHint | FieldError

Playground

3 controls

Controls

value

placeholder

disabled

Usage

<Select
  placeholder="Pick a tone"
  defaultValue="yellow"
  options={[
    { value: "yellow", label: "Yellow" },
    { value: "blue", label: "Blue" },
    { value: "red", label: "Red" },
    { value: "white", label: "White" },
  ]}
/>

Props

30 generated

Prop	Type	Default	Notes
`Select.contentClassName`	`string`	`-`	Adds classes to the dropdown content panel.
`Select.defaultValue`	`string`	`-`	Initial selected option value when uncontrolled.
`Select.disabled`	`boolean`	`false`	Disables the trigger and prevents selection.
`Select.name`	`string`	`-`	Adds a hidden input for native form submission.
`Select.onValueChange`	`((value: string) => void)`	`-`	Called when a new option is selected.
`Select.optionClassName`	`string`	`-`	Adds classes to each dropdown option.
`Select.options`Required	`SelectOption[]`	`-`	Options shown in the dropdown list.
`Select.placeholder`	`string`	`"Select an option"`	Text shown when no option is selected.
`Select.selectedIndicator`	`ReactNode`	`"x"`	Generated from SelectProps.
`Select.showSelectedIndicator`	`boolean`	`false`	Generated from SelectProps.
`Select.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from SelectProps.
`Select.tone`	`'default'`	`"default"`	Generated from SelectProps.
`Select.triggerClassName`	`string`	`-`	Adds classes to the dropdown trigger.
`Select.value`	`string`	`-`	Controlled selected option value.
`Select.variant`	`'default' \| 'filled'`	`"default"`	Generated from SelectProps.
`SelectContent.contentClassName`	`string`	`-`	Adds classes to the dropdown content panel.
`SelectContent.contentRef`Required	`Ref<HTMLDivElement>`	`-`	Generated from SelectContentProps.
`SelectContent.contentStyle`Required	`CSSProperties`	`-`	Generated from SelectContentProps.
`SelectContent.highlightedIndex`Required	`number`	`-`	Generated from SelectContentProps.
`SelectContent.listboxId`Required	`string`	`-`	Generated from SelectContentProps.
`SelectContent.onOptionHover`Required	`(index: number) => void`	`-`	Generated from SelectContentProps.
`SelectContent.onOptionSelect`Required	`(value: string) => void`	`-`	Generated from SelectContentProps.
`SelectContent.optionClassName`	`string`	`-`	Adds classes to each dropdown option.
`SelectContent.options`Required	`SelectOption[]`	`-`	Options shown in the dropdown list.
`SelectContent.selectedIndicator`Required	`ReactNode`	`-`	Generated from SelectContentProps.
`SelectContent.selectedValue`Required	`string`	`-`	Generated from SelectContentProps.
`SelectContent.showSelectedIndicator`Required	`boolean`	`-`	Generated from SelectContentProps.
`SelectContent.size`Required	`'sm' \| 'md' \| 'lg'`	`-`	Generated from SelectContentProps.
`SelectContent.tone`Required	`'default'`	`-`	Generated from SelectContentProps.
`SelectContent.variant`Required	`'default' \| 'filled'`	`-`	Generated from SelectContentProps.

Previous: Field Next: Checkbox