TriggerSelect

PreviousNext

Searchable select with a custom trigger (legacy).

import { TriggerSelect } from "@/rl-ui";

<TriggerSelect
options={[{ value: "1", label: "Ada" }, { value: "2", label: "Alan" }]}
value={selected}
onChange={setSelected}
label="Assignee"
/>

Examples

Empty selection

import { TriggerSelect } from "@/rl-ui";

<TriggerSelect
label="Assignee"
triggerLabel="Pick a person"
options={[
  { value: "1", label: "Ada" },
  { value: "2", label: "Alan" },
  { value: "3", label: "Grace" },
]}
value={null}
onChange={setSelected}
/>

Hide caret

import { TriggerSelect } from "@/rl-ui";

<TriggerSelect
hideCaret
label="Owner"
options={[
  { value: "1", label: "Ada" },
  { value: "2", label: "Alan" },
]}
value={{ value: "2", label: "Alan" }}
onChange={setSelected}
/>

Search placeholder & width

import { TriggerSelect } from "@/rl-ui";

<TriggerSelect
label="Member"
searchPlaceholder="Filter people…"
dropdownWidth={280}
options={[
  { value: "1", label: "Ada Lovelace" },
  { value: "2", label: "Alan Turing" },
  { value: "3", label: "Grace Hopper", disabled: true },
]}
value={{ value: "1", label: "Ada Lovelace" }}
onChange={setSelected}
/>

API

PropTypeDefaultDescription
optionsTriggerSelectOption[]—Options (required). Each: { value, label, imageUrl?, disabled? }.
valueTriggerSelectOption | null—Selected option (required).
onChange(option: TriggerSelectOption | null) => void—Change handler (required).
labelstring—Field label above the trigger.
triggerLabelstring"Choose..."Trigger text when value is null.
searchPlaceholderstring"Search..."Search field placeholder.
dropdownWidthnumber340Menu width in px.
hideCaretbooleanfalseHide the caret on the trigger.
renderOptionIcon(option) => ReactNode—Custom leading icon per option (defaults to Avatar).
classNamestring—Root className.