Stalk UI

Component

Select

Lets a user choose one option from a native menu.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/select

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Select.Root>
  <Select.Trigger aria-label="Status">
    <Select.Value placeholder="Choose a status" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="draft">Draft</Select.Item>
    <Select.Item value="published">Published</Select.Item>
    <Select.Item value="archived">Archived</Select.Item>
  </Select.Content>
</Select.Root>
Theme
<Select.Root>
  <Select.Trigger invalid aria-label="Status">
    <Select.Value placeholder="Required" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="draft">Draft</Select.Item>
  </Select.Content>
</Select.Root>
Theme
<Select.Root disabled>
  <Select.Trigger aria-label="Locked">
    <Select.Value placeholder="Locked" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="locked">Locked</Select.Item>
  </Select.Content>
</Select.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`options``readonly SelectOption[]`Yes--
`value``string`No--
`defaultValue``string`No--
`onValueChange``(value: string) => void`No--
`placeholder``ReactNode`No--
`size``SelectSize`No--
`fullWidth``boolean`No-Stretch the trigger to fill its container; default is content-width.
`invalid``boolean`No--
`disabled``boolean`No--
`name``string`No--
`required``boolean`No--
`'aria-label'``string`No--
`triggerClassName``string`No--
PropTypeRequiredDefaultDescription
`endContent``ReactNode`No-Trailing content aligned to the inline-end of the option (e.g. meta/shortcut).
PropTypeRequiredDefaultDescription
`fullWidth``boolean`No-Stretch the trigger to fill its container; default is content-width.
`invalid``boolean`No--
`size``SelectSize`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`
`fullWidth``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/select.json`
  • Recipe: `select`
  • Files: `src/components/ui/select.tsx`