Select

<Select
value={value}
onValueChange={(nextValue) => {
  if (nextValue !== null) setValue(nextValue);
}}
items={options}
>
<SelectTrigger>
  <SelectValue />
</SelectTrigger>
<SelectContent>
  <SelectGroup>
    {options.map((option) => (
      <SelectItem
        key={option.value}
        value={option.value}
        label={option.label}
      />
    ))}
  </SelectGroup>
</SelectContent>
</Select>

<Selectvalue={value}onValueChange={(nextValue) => {  if (nextValue !== null) setValue(nextValue);}}items={options}><SelectTrigger>  <SelectValue /></SelectTrigger><SelectContent>  <SelectGroup>    {options.map((option) => (      <SelectItem        key={option.value}        value={option.value}        label={option.label}      />    ))}  </SelectGroup></SelectContent></Select>

Installation

npm install pnpm add @notion-kit/select

Or if you prefer using Shadcn primitives, use

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Examples

Custom Options

<Select
  items={options}
  value={value}
  onValueChange={(nextValue) => {
    if (nextValue !== null) setValue(nextValue);
  }}
>
  <SelectTrigger>
    <SelectValue>
      <div>{selectedOption.label}</div>
    </SelectValue>
  </SelectTrigger>
  <SelectContent>{/* SelectGroup + SelectItem */}</SelectContent>
</Select>

<Select  items={options}  value={value}  onValueChange={(nextValue) => {    if (nextValue !== null) setValue(nextValue);  }}>  <SelectTrigger>    <SelectValue>      <div>{selectedOption.label}</div>    </SelectValue>  </SelectTrigger>  <SelectContent>{/* SelectGroup + SelectItem */}</SelectContent></Select>

A Select follows Base UI's composition API. Compose Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, and SelectItem directly. Pass option data to Select with Base UI's items prop when you want SelectValue to render item labels automatically.

Prop	Type	Default	Description
`items`	`Select.Root.Props["items"]`	-	Optional item data used by Base UI value lookup.
`value`	`Value \| Value[] \| null`	-	The selected value.
`defaultValue`	`Value \| Value[] \| null`	-	The uncontrolled initial value.
`disabled`	`boolean`	-	Whether the select is disabled.
`onValueChange`	`(value: Value \| Value[] \| null) => void`	-	Handler called when an option is selected.

SelectGroup

Groups related options. Every SelectItem must be rendered inside a SelectGroup.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The grouped items.

SelectLabel

A non-interactive label used to title a group of options.

Prop	Type	Default	Description
`title`	`string`	-	The group label text.

SelectItem

A single selectable option.

Prop	Type	Default	Description
`value`	`string`	-	The option value.
`label`	`string`	-	The option label.
`icon`	`React.ReactNode`	-	An optional leading icon.
`desc`	`string`	-	An optional description below the label.
`hideCheck`	`boolean`	`false`	Whether the check indicator is hidden.

Select

Installation

Examples

Custom Options

API Reference

Select

SelectGroup

SelectLabel

SelectItem

On this page