StatusPicker

PreviousNext

Colored status selector.

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

<StatusPicker
options={[
  { value: "todo", label: "To do", color: "gray" },
  { value: "done", label: "Done", color: "green" },
]}
value={status}
onChange={setStatus}
/>

Examples

Sizes

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

<>
<StatusPicker size="small" options={options} value="todo" onChange={setS} />
<StatusPicker size="medium" options={options} value="done" onChange={setS} />
</>

Icon only

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

<StatusPicker iconOnly options={options} value="progress" onChange={setS} />

API

PropTypeDefaultDescription
optionsStatusOption[]—Status options (required).
valuestring—Selected value.
onChange(value: string) => void—Change handler.
size"small" | "medium""medium"Trigger size.
iconOnlybooleanfalseHide the label.
placeholderstring"Select status"Empty placeholder.
disabledbooleanfalseDisable the picker.
headerReactNode—Dropdown header.