Select

Single-choice picker built on React Aria. Items are keyed by id, and the selected key — not the rendered label — is the component's value.

import { Select } from "@pockets-ui/components"

Anatomy

Part	Role
`Select.Root`	Owns selection (`selectedKey`, `defaultSelectedKey`), `placeholder`, `disabledKeys`.
`Select.Label`	The field's visible label.
`Select.Trigger`	The button that opens the listbox.
`Select.Value`	Renders the current selection, or the placeholder when empty.
`Select.Content`	The popover listbox.
`Select.Item`	One option. Requires `id` — that's the selection key.

Basic

Animal

Code

import { Select } from "@pockets-ui/components"

export default function SelectBasic() {
  return (
    <Select.Root placeholder="Pick an animal">
      <Select.Label>Animal</Select.Label>
      <Select.Trigger>
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Item id="aardvark">Aardvark</Select.Item>
        <Select.Item id="cat">Cat</Select.Item>
        <Select.Item id="dog">Dog</Select.Item>
        <Select.Item id="kangaroo">Kangaroo</Select.Item>
        <Select.Item id="panda">Panda</Select.Item>
        <Select.Item id="snake">Snake</Select.Item>
      </Select.Content>
    </Select.Root>
  )
}

Preselected value

defaultSelectedKey takes an item's id. Use selectedKey with onSelectionChange instead when the value lives in your own state.

Favorite pet

Code

import { Select } from "@pockets-ui/components"

export default function SelectPreselected() {
  return (
    <Select.Root defaultSelectedKey="dog">
      <Select.Label>Favorite pet</Select.Label>
      <Select.Trigger>
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Item id="cat">Cat</Select.Item>
        <Select.Item id="dog">Dog</Select.Item>
        <Select.Item id="fish">Fish</Select.Item>
      </Select.Content>
    </Select.Root>
  )
}

Disabled

Plan

Code

import { Select } from "@pockets-ui/components"

export default function SelectDisabled() {
  return (
    <Select.Root placeholder="Unavailable" isDisabled>
      <Select.Label>Plan</Select.Label>
      <Select.Trigger>
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Item id="free">Free</Select.Item>
        <Select.Item id="pro">Pro</Select.Item>
      </Select.Content>
    </Select.Root>
  )
}

Disabled options

disabledKeys on the root keeps individual options visible but unselectable — useful for tiers a user hasn't unlocked.

Tier

Code

import { Select } from "@pockets-ui/components"

export default function SelectDisabledOptions() {
  return (
    <Select.Root placeholder="Pick a tier" disabledKeys={["enterprise"]}>
      <Select.Label>Tier</Select.Label>
      <Select.Trigger>
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Item id="free">Free</Select.Item>
        <Select.Item id="pro">Pro</Select.Item>
        <Select.Item id="enterprise">Enterprise (contact sales)</Select.Item>
      </Select.Content>
    </Select.Root>
  )
}