Select

Picks a single value from a list of options. The value is the value of the chosen SelectItem, and onValueChange receives it, typed like the value you pass: values are strings or numbers. Set clearable to show a button that clears the value again, onValueChange then receives null.

Status

Select.tsx

import {Select, SelectItem} from 'alinea/components'

export function SelectExample() {
  return (
    <Select label="Status" defaultValue="published" style={{width: 260}}>
      <SelectItem value="draft">Draft</SelectItem>
      <SelectItem value="published">Published</SelectItem>
      <SelectItem value="archived">Archived</SelectItem>
    </Select>
  )
}

Groups

Group related options under a label and divide groups with SelectSeparator. Items can show an icon and a description below their label.

Entry type

SelectGroups.tsx

import {
  Select,
  SelectGroup,
  SelectItem,
  SelectSeparator
} from 'alinea/components'
import {
  IcRoundDescription,
  IcRoundFeed,
  IcRoundImage
} from 'alinea/dashboard/icons'

export function SelectGroupsExample() {
  return (
    <Select label="Entry type" defaultValue="product" style={{width: 280}}>
      <SelectGroup label="Pages">
        <SelectItem value="page" icon={IcRoundDescription}>
          Page
        </SelectItem>
        <SelectItem
          value="product"
          icon={IcRoundImage}
          description="A product with price and photos"
        >
          Product
        </SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup label="Blog">
        <SelectItem value="post" icon={IcRoundFeed}>
          Blog post
        </SelectItem>
      </SelectGroup>
    </Select>
  )
}

States

A placeholder shows while nothing is selected, and clearable adds a button to clear the selection. Like the other form controls, a select takes description, error, required, disabled and readOnly.

Category

Locale

Status *

Pick a status to continue

SelectStates.tsx

import {Select, SelectItem} from 'alinea/components'

export function SelectStatesExample() {
  return (
    <div style={{display: 'grid', gap: 16, width: 280}}>
      <Select label="Category" placeholder="Choose a category" clearable>
        <SelectItem value="bedroom">Bedroom</SelectItem>
        <SelectItem value="dining">Dining</SelectItem>
      </Select>
      <Select label="Locale" defaultValue="en" disabled>
        <SelectItem value="en">English</SelectItem>
        <SelectItem value="nl">Nederlands</SelectItem>
      </Select>
      <Select label="Status" required error="Pick a status to continue">
        <SelectItem value="draft">Draft</SelectItem>
        <SelectItem value="published">Published</SelectItem>
      </Select>
    </div>
  )
}

Props

`<Select>`

A labelled field to pick a single value from a list. Set clearable to let the value be cleared again.

PropTypeDefaultDescription

valueV | nullDefault –The value of the selected SelectItem

defaultValueV | nullDefault –

onValueChange(value: V | null) => voidDefault –Called with the selected value, or null when the value is cleared

placeholderstringDefault –

clearablebooleanDefault –Show a button that clears the value

namestringDefault –Name of the hidden form input carrying the value

autoFocusbooleanDefault –

size'default' | 'sm'Default 'default'sm is as tall as a default Button, defaults to default

`<SelectItem>`

PropTypeDefaultDescription

value*KeyDefault –

disabledbooleanDefault –

iconIconType | ReactElementDefault –

textValuestringDefault –Text used for typeahead and the value, defaults to string children

descriptionReactNodeDefault –Secondary text shown below the label in the list

Also accepts className and style.

`<SelectGroup>`

PropTypeDefaultDescription

labelReactNodeDefault –

Also accepts id and aria-* labelling attributes.

`<SelectSeparator>`

Accessibility

The list opens with Enter, Space or the arrow keys and supports typeahead: typing jumps to the first matching option. The options are announced as a listbox with the selected one marked.