Select

Keyboard-accessible dropdown select with intent variants, sizes, grouped options, leading icons, item descriptions, and label position options.

Installation

pnpm add @tessinaui/ui

Usage

import {
  SelectRoot,
  SelectTrigger,
  SelectPopup,
  SelectScrollUpArrow,
  SelectScrollDownArrow,
  SelectList,
  SelectItem,
  SelectGroup,
  SelectGroupLabel,
  SelectSeparator,
} from "@tessinaui/ui";

{/* Basic */}
<SelectRoot label="Fruit" value={value} onValueChange={setValue}>
  <SelectTrigger placeholder="Select a fruit…" />
  <SelectPopup>
    <SelectList>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
    </SelectList>
  </SelectPopup>
</SelectRoot>

{/* Grouped with scroll arrows */}
<SelectRoot label="Region" value={value} onValueChange={setValue}>
  <SelectTrigger placeholder="Select a region…" />
  <SelectPopup>
    <SelectScrollUpArrow />
    <SelectList>
      <SelectGroup>
        <SelectGroupLabel>Europe</SelectGroupLabel>
        <SelectItem value="fr">France</SelectItem>
        <SelectItem value="de">Germany</SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectGroupLabel>Asia Pacific</SelectGroupLabel>
        <SelectItem value="jp">Japan</SelectItem>
        <SelectItem value="au">Australia</SelectItem>
      </SelectGroup>
    </SelectList>
    <SelectScrollDownArrow />
  </SelectPopup>
</SelectRoot>

API Reference

SelectRoot props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Trigger height and text scale
`intent`	`"none" \| "error" \| "warning" \| "success" \| "info"`	`"none"`	Border and focus-ring colour
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`	`"full"`	Border radius of the trigger
`labelPosition`	`"outside-top" \| "inside" \| "outside-left"`	`"outside-top"`	Label layout relative to the trigger
`label`	`string`	—	Label text
`required`	`boolean`	—	Appends `*` to label
`infoText`	`string`	—	Inline hint shown beside the label
`supportingText`	`string`	—	Helper / validation text below the trigger
`value`	`string \| null`	—	Controlled selected value
`defaultValue`	`string \| null`	—	Uncontrolled initial value
`onValueChange`	`(value: string \| null) => void`	—	Called when selection changes
`disabled`	`boolean`	—	Disables the whole select
`name`	`string`	—	Native form field name
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Text direction
`wrapperClassName`	`string`	—	Class for the outermost wrapper `div`

SelectTrigger props

Prop	Type	Description
`leadingIcon`	`ReactNode`	Icon at the start of the trigger, before the value
`placeholder`	`string`	Text shown when no value is selected
`className`	`string`	Extra classes on the trigger `button`

SelectItem props

Prop	Type	Description
`value`	`string`	The value this item represents
`disabled`	`boolean`	Prevents selection
`leadingIcon`	`ReactNode`	Icon shown before the label
`leadingAvatar`	`ReactNode`	Avatar shown before the label
`description`	`string`	Secondary text rendered below the item label

SelectPopup props

Prop	Type	Description
`positionerProps`	`object`	Forwarded to the `Positioner` element (e.g. `sideOffset`, `alignOffset`)
`className`	`string`	Extra classes on the popup panel

SelectList props

Prop	Type	Description
`className`	`string`	Useful for capping height: `className="max-h-60"`

All other sub-components (SelectGroup, SelectGroupLabel, SelectSeparator, SelectScrollUpArrow, SelectScrollDownArrow, SelectSupportingText) forward all standard HTML element props plus className.