Option
One semantic option model and renderer for labels, leading visuals, descriptions, shortcuts and selection across Kit controls.
When to use
- Colour properties show swatches (`kind: "color"`), never a generic icon.
- Define choices once and pass them to Select, ComboBox, PropertySelect, Menu or Command.
- Use statusOption, priorityOptions and personOption for workflow status, priority and people. personOption accepts email keywords and a searchable role chip shown only in the list.
- Use OptionItemContent when composing a custom row or compact selected value.
Consider an alternative
- Standalone actions — use Button.
- Standalone status labels or avatars — use StatusLabel or Avatar.
Import
import type { Option } from '@revido-llc/kit';Props
Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.
Related exports
OptionItemContent, OptionLeadingContent, PriorityIcon, statusOption, priorityOptions, personOption
Examples
Leading kinds across controls
Icon, status, avatar, color and priority share the same leading box in each control. Changing a row updates all four values.
const statuses = [statusOption("todo", "Not started", "todo"), statusOption("active", "In progress", "in-progress"), statusOption("done", "Done", "done")];
<Select label="Status" items={statuses} selectedKey={status} onSelectionChange={setStatus} />
<ComboBox label="Status" items={statuses} selectedKey={status} onSelectionChange={setStatus} />
<Menu selectionMode="single" selectedKeys={[status]} onAction={setStatus}>
{statuses.map((option) => <MenuItem key={option.id} id={option.id} leading={option.leading}>{option.label}</MenuItem>)}
</Menu>
<PropertySelect label="Status" options={statuses} value={status} onChange={setStatus} />Workflow presets
Status categories use their glyphs; priorities use bars or the urgent alert; people keep their avatar in both the list and selected value.
const statuses = [statusOption("todo", "Not started", "todo"), statusOption("active", "In progress", "in-progress"), statusOption("done", "Done", "done")];
const priorities = priorityOptions();
const people = [personOption({ id: "ana", name: "Ana Costa", email: "ana@revido.co", role: "Developer" })];
<PropertySelect label="Status" options={statuses} value={status} onChange={setStatus} />
<PropertySelect label="Priority" options={priorities} value={priority} onChange={setPriority} />
<PropertySelect label="Assignee" searchable options={people} value={assignee} onChange={setAssignee} allowNone noneLabel="Unassigned" />Row anatomy and states
The renderer owns layout; the parent control owns focus and disabled behavior. Single selection reserves a trailing check; multiple selection uses a leading checkbox.
<MenuItem leading={{ kind: "icon", icon: <Pencil /> }} description="Update the title and properties" shortcut="E">Edit feature</MenuItem>
<MenuItem leading={{ kind: "icon", icon: <Trash2 />, tone: "danger" }} tone="danger" isDisabled disabledReason="Complete its tasks before deleting">Delete feature</MenuItem>Compact values
Selected values keep the same leading visual and label while omitting list descriptions, shortcut hints and selection marks.
<OptionItemContent label="In progress" leading={statusOption("active", "In progress", "in-progress").leading} presentation="value" />Literal anatomy
Static row, registered icon name, leading and property primitives; bind events in the consuming app.
<OptionItemContent label="Projects" leading={{ kind: "icon", icon: "folder-kanban", tone: "primary" }} />
<OptionItemContent label="In progress" leading={{ kind: "status", category: "in-progress" }} />
<OptionLeadingContent leading={{ kind: "avatar", name: "Ada" }} />
<PriorityIcon level="high" />
<PropertySelect label="Status" value="todo" options={[{ id: "todo", label: "Todo" }, { id: "done", label: "Done" }]} />