ComponentsForm Blocks
Select
Keyboard-accessible dropdown select with intent variants, sizes, grouped options, leading icons, item descriptions, and label position options.
Playground
Installation
pnpm add @tessinaui/uiUsage
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>Showcase
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.
Slider
A range input control built on Base UI. Two visual variants (discrete and continuous), five intents, three sizes, horizontal and vertical orientation, range mode, tick marks, value tooltip, and RTL support.
Combobox
Filterable select with single and multi-select modes, grouped options, chips, loading and empty states, and all Field variants.