Select
Dropdown selection from a list of options.
Preview
This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.
Dropdown selection from a list of options.
Usage
Compose Root, Trigger, Content, Item, Value, HiddenInput, ScrollUpButton, ScrollDownButton.
import * as Select from "@solidiom/select"
;<Select.Root>Select content</Select.Root>Installation
Install the package with pnpm add @solidiom/select. The package requires compatible solid-js and @solidjs/web peer dependencies.
Parts
Select exposes 8 parts:
- Root —
data-part="root". - Trigger —
data-part="trigger". - Content —
data-part="content". - Item —
data-part="item". - Value —
data-part="value". - HiddenInput —
data-part="hiddeninput". - ScrollUpButton —
data-part="scrollupbutton". - ScrollDownButton —
data-part="scrolldownbutton".
Styling
Select carries data-scope="select" and data-part attributes on each part for CSS/recipe targeting. State attributes like data-state, data-disabled, and data-highlighted are exposed where applicable.
Keyboard & behavior
| Key | Behavior |
|---|---|
| ArrowDown | Opens the listbox if closed; moves highlight to the next option. |
| ArrowUp | Moves highlight to the previous option. |
| Enter | Selects the highlighted option and closes the listbox. |
| Escape | Closes the listbox without changing the selection. |
| Space | Opens the listbox or selects the highlighted option. |
Composition
Select is designed to compose with other primitives. Its parts can be combined with Field, Button, or other primitives as needed.
SSR and hydration
Select renders as semantic HTML during server rendering. Interactive behavior (keyboard handlers, state management) activates on hydration without layout shift.