ComponentsForms

Select

Pick one option from a list, with full keyboard support.

Playground

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Pick a frequency" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="daily">Daily</SelectItem>
    <SelectItem value="weekly">Weekly</SelectItem>
    <SelectItem value="monthly">Monthly</SelectItem>
  </SelectContent>
</Select>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "junco";

<Field label="Frequency">
  <Select defaultValue="weekly">
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="daily">Daily</SelectItem>
      <SelectItem value="weekly">Weekly</SelectItem>
    </SelectContent>
  </Select>
</Field>

Examples#

Groups#

Group long lists with SelectGroup, SelectLabel and SelectSeparator.

Timezone

In a form field#

Field labels the trigger and links the error to it.

Plan

Pick a plan to continue.

API reference#

`Select`#

value / defaultValue: Controlled or initial value.; string
onValueChange: Called when the user picks an option.; (value: string) => void
disabled: Disables the whole select.; boolean; Default: false
name: Form field name, for native form submission.; string

Prop	Type	Default
`value / defaultValue` Controlled or initial value.	`string`	`–`
`onValueChange` Called when the user picks an option.	`(value: string) => void`	`–`
`disabled` Disables the whole select.	`boolean`	`false`
`name` Form field name, for native form submission.	`string`	`–`

`SelectTrigger`#

size: Matches Input sizes.; "sm" | "md" | "lg"; Default: "md"
isInvalid: Sets aria-invalid and the error border.; boolean; Default: false

Prop	Type	Default
`size` Matches Input sizes.	`"sm" \| "md" \| "lg"`	`"md"`
`isInvalid` Sets aria-invalid and the error border.	`boolean`	`false`

`SelectItem`#

value: Required. The value reported when picked.; string
disabled: Skipped by the keyboard and not selectable.; boolean; Default: false

Prop	Type	Default
`value` Required. The value reported when picked.	`string`	`–`
`disabled` Skipped by the keyboard and not selectable.	`boolean`	`false`

Accessibility#

Keyboard interactions
Key	Action
`Space`	Opens the list when the trigger is focused, or picks the highlighted option.
`Enter`	Opens the list, or picks the highlighted option.
`↑↓`	Moves the highlight.
`Esc`	Closes the list and returns focus to the trigger.
`A–Z`	Typeahead: jumps to the first option starting with that letter.

Follows the WAI-ARIA listbox pattern via Radix: the trigger is a combobox and options announce their selected state.
Give the trigger a label with Field, a Label, or aria-label.
The semantic-class version is a real <select>, which keeps native pickers on phones.

<Select> <SelectTrigger> <SelectValue placeholder="Pick a frequency" /> </SelectTrigger> <SelectContent> <SelectItem value="daily">Daily</SelectItem> <SelectItem value="weekly">Weekly</SelectItem> <SelectItem value="monthly">Monthly</SelectItem> </SelectContent> </Select>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "junco";

<Field label="Frequency">
  <Select defaultValue="weekly">
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="daily">Daily</SelectItem>
      <SelectItem value="weekly">Weekly</SelectItem>
    </SelectContent>
  </Select>
</Field>

API reference#

`Select`#

value / defaultValue: Controlled or initial value.; string
onValueChange: Called when the user picks an option.; (value: string) => void
disabled: Disables the whole select.; boolean; Default: false
name: Form field name, for native form submission.; string

Prop	Type	Default
`value / defaultValue` Controlled or initial value.	`string`	`–`
`onValueChange` Called when the user picks an option.	`(value: string) => void`	`–`
`disabled` Disables the whole select.	`boolean`	`false`
`name` Form field name, for native form submission.	`string`	`–`

`SelectTrigger`#

size: Matches Input sizes.; "sm" | "md" | "lg"; Default: "md"
isInvalid: Sets aria-invalid and the error border.; boolean; Default: false

Prop	Type	Default
`size` Matches Input sizes.	`"sm" \| "md" \| "lg"`	`"md"`
`isInvalid` Sets aria-invalid and the error border.	`boolean`	`false`

`SelectItem`#

value: Required. The value reported when picked.; string
disabled: Skipped by the keyboard and not selectable.; boolean; Default: false

Prop	Type	Default
`value` Required. The value reported when picked.	`string`	`–`
`disabled` Skipped by the keyboard and not selectable.	`boolean`	`false`

Accessibility#

Keyboard interactions
Key	Action
`Space`	Opens the list when the trigger is focused, or picks the highlighted option.
`Enter`	Opens the list, or picks the highlighted option.
`↑↓`	Moves the highlight.
`Esc`	Closes the list and returns focus to the trigger.
`A–Z`	Typeahead: jumps to the first option starting with that letter.

Follows the WAI-ARIA listbox pattern via Radix: the trigger is a combobox and options announce their selected state.

Give the trigger a label with Field, a Label, or aria-label.

The semantic-class version is a real <select>, which keeps native pickers on phones.

Playground#

Usage#

Examples#

Groups#

In a form field#

API reference#

Select#

SelectTrigger#

SelectItem#

Accessibility#

Playground#

Usage#

Examples#

Groups#

In a form field#

API reference#

Select#

SelectTrigger#

SelectItem#

Accessibility#

`Select`#

`SelectTrigger`#

`SelectItem`#

`Select`#

`SelectTrigger`#

`SelectItem`#