Select

PreviousNext

Select one or many options (basic, tag, or user variants).

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

<Select
options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]}
placeholder="Pick one"
/>

Examples

Sizes

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

<>
<Select size="small" options={options} placeholder="Small" />
<Select size="medium" options={options} placeholder="Medium" />
<Select size="large" options={options} placeholder="Large" />
</>

Multi-select

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

<Select isMulti isClearable options={options} placeholder="Pick many" />

Disabled

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

<Select isDisabled options={options} placeholder="Disabled" />

API

PropTypeDefaultDescription
optionsOption[]—Selectable options.
size"small" | "medium" | "large""medium"Control height.
variant"basic" | "tag" | "user""basic"Option rendering style.
isMultibooleanfalseAllow multiple values.
isClearablebooleanfalseShow clear affordance.
isDisabledbooleanfalsePrevents interaction.
placeholderstring—Empty-state hint.
valueOption | Option[] | null—Controlled value.
onChange(value) => void—Selection change handler.