Notion UI
Documentation

Select

Displays a list of options for the user to pick from—triggered by a button.

<Select options={options} value={value} onChange={setValue} />

Installation

pnpm add @notion-kit/select

Or if you prefer using Shadcn primitives, use

pnpm add @notion-kit/shadcn

Examples

Custom Options

<Select
  options={options}
  value={value}
  onChange={setValue}
  renderOption={({ option }) => (
    <div>
      {typeof option === "string" ? option : option?.label}
    </div>
  )}
/>

API Reference

Select

A Select is a generic component Select<T>, where T extends string.

PropTypeDefaultDescription
options*Record<T, string | Option>-The available options.
valueT-The selected value.
disabledboolean-Whether the select is disabled.
hideCheckboolean-Whether the check ✔️ should be hidden.
side"top" | "right" | "bottom" | "left""bottom"The preferred side of the anchor to render against when open.
align"start" | "center" | "end""end"The preferred alignment against the anchor.
onChange(value: T) => void-Handler that is called when an option is selected.
renderOptionReact.FC<{ option?: Option | string }>-A custom renderer for SelectItem.

type Option

PropTypeDescription
label*stringThe option name.
descriptionstringThe description of the option.

Previous

Resizable

Next

Separator

On this page