Components

Property Picker

A searchable metadata picker for status, priority, assignee, project, labels, dates, and similar SaaS properties.

Status property

The compact trigger shows the current value. Opening it moves focus directly into a borderless search field, keeps groups intact while filtering, and marks the selected row without turning the whole surface into a wall of borders.

tsx

const statusOptions = [
  { value: "triage", label: "Triage", group: "Active" },
  { value: "started", label: "In progress", group: "Active" },
  { value: "done", label: "Done", group: "Closed" },
];

<PropertyPicker
  label="Status"
  name="status"
  options={statusOptions}
  value={status}
  onValueChange={setStatus}
/>

Behavior

Selection works with pointer, Enter, and arrow keys. Escape closes the picker and returns focus to the pill. Optional properties expose a clear action, and the selected string is submitted through a native hidden form field when a name is provided.

Pass stable string values. Labels, descriptions, icons, and grouping can change without changing the form value or controlled state.