Select

Picks a single value from a list of options. The value is the value of the chosen SelectItem, and editors can clear it unless the field is required.

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. Like the other form controls, a select takes description, error, required, disabled and readOnly.

Props

`<Select>`

A labelled field to pick a single value from a list. The value can be cleared unless the field is required.

PropTypeDefaultDescription

valuestring | nullDefault –

defaultValuestring | nullDefault –

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

placeholderstringDefault –

namestringDefault –Name of the hidden form input carrying the value

autoFocusbooleanDefault –

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

openbooleanDefault –

defaultOpenbooleanDefault –

onOpenChange(open: boolean) => voidDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<SelectItem>`

PropTypeDefaultDescription

value*stringDefault –

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.