Select — SLAB

Interactive demos — click to open

Click outside to close · keyboard: ↑↓ Enter Esc

PriorityCampaign visibility priority.

Owner

Category *This field is required.

RegionRegion is locked to your account.

Visual states

idle · selected · invalid · disabled

This field is required.

Region is locked to your account.

Props

Prop	Type	Default	Description
options	string[] \| {value, label, disabled?}[]	[]	Array of options. Strings auto-convert to {value, label}.
value	string	—	Controlled selected value.
defaultValue	string	—	Initial value for uncontrolled use.
onChange	(value: string) => void	—	Called when selection changes.
placeholder	string	"Select…"	Trigger text when nothing is selected.
label	string	null	Mono uppercase label above trigger.
hint	string	null	Helper text below. Turns coral when invalid.
invalid	boolean	false	Coral border state.
disabled	boolean	false	Mutes and disables interaction.
style	CSSProperties	{}	Merged onto the root element.

Usage

import { Select } from "components/forms/Select";

// Simple string options
<Select
  label="Priority"
  options={["High", "Medium", "Low"]}
  value={priority}
  onChange={setPriority}
/>

// Object options with disabled entry
<Select
  label="Owner"
  options={[
    { value: "maya", label: "Maya Chen" },
    { value: "sam",  label: "Sam Osei", disabled: true },
  ]}
  placeholder="Select owner…"
  onChange={setOwner}
/>