Select

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

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

Installation

npm install pnpm add @notion-kit/select

Or if you prefer using Shadcn primitives, use

pnpm add @notion-kit/shadcn

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>
  )}
/>

<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.

Prop	Type	Default	Description
`options`*	`Record<T, string \| Option>`	-	The available options.
`value`	`T`	-	The selected value.
`disabled`	`boolean`	-	Whether the select is disabled.
`hideCheck`	`boolean`	-	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.
`renderOption`	`React.FC<{ option?: Option \| string }>`	-	A custom renderer for `SelectItem`.

`type` Option

Prop	Type	Description
`label`*	`string`	The option name.
`description`	`string`	The description of the option.

Select

Installation

Examples

Custom Options

API Reference

Select

type Option

On this page

`type` Option