Fieldbook
Sign in

Inputs

Grouped select menu

A dropdown select whose options are grouped under section headings, with edge arrow strips that auto-scroll long lists.

Using Grouped select menu

A dropdown select whose options are grouped under section headings, with edge arrow strips that auto-scroll long lists.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: placeholder, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Compact select menu
2801Compact select menuInputsA trigger button that opens a floating list of choices, with the current pick shown on the button and a check beside it in the list.
Searchable Select
2421Searchable SelectInputsA button that opens a small popover with a search field and a filterable list of options, so someone can type to narrow choices instead of scrolling a long dropdown.
Styled native dropdown
2783Styled native dropdownInputsA native select restyled with a custom border, focus ring and chevron while the operating system keeps providing the option menu and keyboard behavior.
Birthdate popover picker
2305Birthdate popover pickerInputsA labeled button that opens a floating calendar with month and year dropdowns for quickly reaching a birth year, closing itself the moment a day is picked.
Caption Style Date Picker
2118Caption Style Date PickerInputsA single date picker paired with a select menu that swaps its header between a combined month and year dropdown, a month only dropdown, or a year only dropdown.
Combobox field
2761Combobox fieldInputsA searchable dropdown field: typing filters a list of options live, and picking one fills the field.