Select

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

let items: array<BaseUi.Select.Item.t<null<string>>> = [
  {label: "Select a fruit", value: Null.null},
  {label: "Apple", value: Value("apple")},

Installation

npx shadcn@latest add @rescript-shadcn/Select

Usage

<Select>
  <Select.Trigger className="w-[180px]">
    <Select.Value placeholder="Theme" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Item value="light"> {"Light"->React.string} </Select.Item>
      <Select.Item value="dark"> {"Dark"->React.string} </Select.Item>
      <Select.Item value="system"> {"System"->React.string} </Select.Item>
    </Select.Group>
  </Select.Content>
</Select>

Examples

Align Item With Trigger

Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger. When true (default), the popup positions so the selected item appears over the trigger. When false, the popup aligns to the trigger edge.

@@directive("'use client'")

let items: array<BaseUi.Select.Item.t<option<string>>> = [

Groups

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

let fruits: array<BaseUi.Select.Item.t<null<string>>> = [
  {label: "Apple", value: Null.Value("apple")},
  {label: "Banana", value: Value("banana")},

Scrollable

A select with many items that scrolls.

let northAmerica: array<BaseUi.Select.Item.t<null<string>>> = [
  {label: "Eastern Standard Time", value: Null.Value("est")},
  {label: "Central Standard Time", value: Value("cst")},

Disabled

type row = {
  label: string,
  value: null<string>,

Invalid

Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.

<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>
let items: array<BaseUi.Select.Item.t<null<string>>> = [
  {label: "Select a fruit", value: Null.null},
  {label: "Apple", value: Value("apple")},

API Reference

See the Base UI Select documentation.