Select

Select allows users to choose a single option from a dropdown list. It's ideal for forms where space is limited.

Import

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectListBox,
  SelectOption
} from '@proyecto-viviana/solid-spectrum';

Basic Usage

A simple select with static options.

Favorite fruit

Selected: None

<Select items={items} selectedKey={selected()} onSelectionChange={setSelected}>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectListBox>
    {(item) => <SelectOption id={item.id}>{item.name}</SelectOption>}
  </SelectListBox>
</Select>

With Description

Add a description to provide additional context.

CountrySelect your country of residence

<Select label="Country" description="Select your country of residence" items={items}>...</Select>

Disabled Options

Individual options can be disabled.

Plan

<Select items={items} getDisabled={(item) => item.isDisabled ?? false}>...</Select>

Disabled State

The entire select can be disabled.

Disabled select

<Select label="Disabled select" isDisabled items={items}>...</Select>

Required Field

Mark the select as required for form validation.

Required field

<Select label="Required field" isRequired items={items}>...</Select>

Select Props

Props

Prop	Type	Default	Description
`items`	T[]	—	Collection of selectable items
`label`	string	—	Label for the select field
`description`	string	—	Help text below the select
`errorMessage`	string	—	Error message to display
`selectedKey`	string \| null	—	Currently selected key (controlled)
`defaultSelectedKey`	string	—	Default selected key (uncontrolled)
`onSelectionChange`	(key: string \| null) => void	—	Handler called when selection changes
`isDisabled`	boolean	`false`	Whether the select is disabled
`isRequired`	boolean	`false`	Whether a selection is required
`children`	JSX.Element	—	SelectTrigger and SelectListBox

SelectOption Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique identifier for the option
`textValue`	string	—	Text value for typeahead (defaults to children text)
`isDisabled`	boolean	`false`	Whether the option is disabled
`children`	JSX.Element	—	Option content

Accessibility

Uses listbox pattern with proper ARIA roles
Full keyboard navigation: Arrow keys, Home, End, Page Up/Down
Type-ahead search to quickly find options
Announces selection changes to screen readers
Focus trapped within popover when open