Status select
A status select looks like the lozenge and changes the status it shows. Use it where people move a request on; use the lozenge where the status is read-only.
Change the status
Pick another status. The tone and emphasis follow the new value, because the lozenge is redrawn from the data.
Open
Show code
<KbStatusSelect label="Status" current={status} tone={tone} emphasis={waiting} options={others} onChange={setStatus} />When to use
- Use it for the one place a person changes a status, such as a request header.
- List only the statuses the person can move to; the current one is shown, not repeated in the list.
- Show a status once per view. Don't add a lozenge beside it.
- Use the same tones as the lozenge: to do is ink, in progress is sky, done is teal, handoff is ruby.
Open
Open ▾
Import
import { KbStatusSelect } from "@/components/ui/KbStatusSelect";
<KbStatusSelect
label="Status"
current="Open"
tone="sky"
options={[{ value: "resolved", label: "Resolved" }]}
onChange={setStatus}
/>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Required. The accessible name of the control: Status. |
current | string | None | The status shown now. |
suffix | string | None | Extra words that are not a choice, such as by KiBee. |
tone | "ink" | "sky" | "teal" | "ruby" | "gold" | "ink" | The status category. |
emphasis | boolean | false | Subtle emphasis for waiting states. |
options | { value, label }[] | None | The statuses the person can move to. |
onChange | (value: string) => void | None | Called with the picked value. The parent re-renders with the new status. |
disabled | boolean | false | Fades the control while a change is saving. |
Keyboard and screen readers
- A native select sits invisibly over the lozenge, so the platform picker and keyboard behaviour apply.
- The control is named by a visually hidden label; its tooltip reads Status: Open.
- Focus shows the shared gold ring around the whole lozenge.