Picker

Three shapes, one list

DropdownField is for forms: a full floating field with a label and icon. SelectField is the same thing with a <select> interface, meaning <option> children and an event-based onChange, so a form written for a native select can switch without a rewrite; the value is sent in a hidden input with the same name. SelectMenu is a small chip, for places where a full field is too big, like the time at the bottom of the calendar.

Selection chip

SelectMenu is 30px tall, its digits are tabular, and its list is the same OptionList.

Floating panel

The list isn't inside the field; Floating moves it to body and positions it from the field with position: fixed: below if there's room, above if there's more room there, always within the screen, and it follows the field as you scroll. That way no dialog or card clips half the list with its own scroll.

On phones, the same content rises as a bottom sheet, with the field's label as its heading.

Behavior

• When it opens, the selected option is visible and highlighted.
• Up and down arrows, Home and End, Enter or Space to select, Escape to close. Type a few letters in a row (within 600 milliseconds) to jump to the next option that starts with them.
• Escape closes only the topmost panel and doesn't reach the dialog beneath it.
• Groups sit under a heading; a disabled option is visible but can't be selected.
• searchable adds a filter box above the list; the filter understands Persian digits too.
• addNewLabel and onAddNew add an "Add new option" row at the bottom of the list.
• After a selection, focus returns to the field.

Rules

Code

<DropdownField
  label={tr("مسئول")}
  icon={paths.user}
  value={owner}
  options={members.map((m) => ({ value: m.id, label: m.name }))}
  onChange={setOwner}
  searchable
/>

<SelectMenu ariaLabel={tr("ساعت")} value={hour} options={HOURS} onChange={setHour} />

Sizes

Row states

• The selected option is --accent-text on soft orange: 4.69 to 1 in light and 5.31 in dark, AA in both; it also has a checkmark, so selection isn't shown by color alone.

Keyboard and roles

• On open, focus moves to the list, or to the filter box if it's searchable. On phones focus stays on the list so the keyboard doesn't cover the sheet.
• In the filter box, Home and End move the cursor, not the row.
• If the filter finds nothing, it shows “Nothing found” (12.5px, centered).