Select

The dropdown Attio uses in Settings (Timezone, Start week, …): a 32px role="combobox" trigger (value + chevron) over a portaled role="listbox" — radius 12, soft layered shadow — of 32px options that show a check on the selected one and highlight on hover / keyboard. Pass searchable for a Linear/cmdk-style filter field at the top of the list (the Timezone select below).

Preview

Preferred Timezone

Start week on

Installation

bun add crisp

import "crisp/styles.css";
import { Select } from "crisp";

Usage

Controlled with value + onValueChange, or uncontrolled from defaultValue:

import { Select } from "crisp";
import * as React from "react";

function StartWeek() {
  const [day, setDay] = React.useState("mon");
  return (
    <Select
      value={day}
      onValueChange={setDay}
      options={[
        { value: "mon", label: "Monday" },
        { value: "sat", label: "Saturday" },
        { value: "sun", label: "Sunday" },
      ]}
      aria-label="Start week on"
    />
  );
}

Props

Prop	Type	Default	Description
`options`	`SelectOption[]`	—	The choices — each `{ value, label, disabled? }`.
`value`	`string`	—	Controlled value. Omit for uncontrolled.
`defaultValue`	`string`	—	Initial value when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Fires with the picked value.
`placeholder`	`string`	`"Select…"`	Shown until a value is chosen.
`searchable`	`boolean`	`false`	Adds a filter field at the top of the list.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder for the search field.
`disabled`	`boolean`	`false`	Dims and blocks the trigger.
`aria-label`	`string`	—	Accessible name for the combobox + listbox.

SelectOption is { value, label, keywords?, disabled? } — set keywords to control the searchable text when the label isn't a plain string.

Notes

Keyboard. Closed: ↓ / Enter / Space open (highlighting the selected option). Open: ↑/↓ move, Home/End jump, Enter/Space pick, Esc closes and returns focus to the trigger, Tab closes.
Semantics. A role="combobox" button with aria-expanded / aria-haspopup="listbox"; each option is a role="option" with aria-selected; the check marks the current value.
Placement. The listbox opens below, or flips above when there isn't room; it closes on outside pointer-down. Measured: trigger r9, listbox r12 + 4px padding, options 32px / r8.

Used across the settings surface.

Preview

Installation

Usage

Props

Notes

On this page