maud-ui64 components

Combobox

Framework picker

Search and select from a list of frontend frameworks.

Pre-selected

Placeholder

Disabled

Auto-highlight

With clear button

Invalid state

Assign team member

A realistic search-to-select pattern for assigning people to a task.

Optional. The reviewer will be notified when the task is ready.

Elena GarciaGrace Lee

Grouped options

Options separated into logical groups with uppercase labels.

Usage

use maud_ui::primitives::combobox;

let html = combobox::render(combobox::Props {
    id: "lang-combo".into(),
    name: "language".into(),
    placeholder: "Select language".into(),
    selected: Some("rust".into()),
    options: vec![
        combobox::ComboboxOption { value: "rust".into(), label: "Rust".into() },
        combobox::ComboboxOption { value: "ts".into(), label: "TypeScript".into() },
    ],
    ..Default::default()
});

Combobox

A searchable select component with optional grouping, multi-select mode, and auto-highlight. Extends Select with text filtering and chip rendering for multi-select.

Import

use maud_ui::primitives::combobox::{self, ComboboxOption, ComboboxGroup, Props};

Example

use maud::html;
use maud_ui::primitives::combobox;

html! {
    (combobox::render(combobox::Props {
        id: "framework".into(),
        name: "framework".into(),
        options: vec![
            combobox::ComboboxOption { value: "react".into(), label: "React".into() },
            combobox::ComboboxOption { value: "vue".into(), label: "Vue".into() },
        ],
        selected: Some("react".into()),
        placeholder: "Select...".into(),
        search_placeholder: "Search...".into(),
        empty_text: "No results.".into(),
        disabled: false,
        multiple: false,
        auto_highlight: true,
        show_clear: true,
        aria_invalid: false,
        groups: vec![],
        selected_values: vec![],
    }))
}

Props

FieldTypeDefaultDescription
idString"combobox"Unique element id
nameString"combobox"Form input name attribute
optionsVec<ComboboxOption>vec![]Flat list of selectable options
selectedOption<String>NoneCurrently selected value (single-select)
placeholderString"Select…"Trigger placeholder text when no selection
search_placeholderString"Search…"Search input placeholder
empty_textString"No results found."Message when filter returns no matches
disabledboolfalseDisables the trigger and all interactions
multipleboolfalseMulti-select mode: selected values render as chips
auto_highlightboolfalseFirst filtered option gets aria-selected + data-highlighted for keyboard Enter
show_clearboolfalseRender a small X button to clear the selection
aria_invalidboolfalseSets aria-invalid="true" for form validation styling
groupsVec<ComboboxGroup>vec![]Grouped options; takes precedence over options when non-empty
selected_valuesVec<String>vec![]Selected values for multi-select mode (rendered as chips)

Accessibility

Trigger has role="combobox" with aria-expanded and aria-haspopup="listbox". Dropdown list has role="listbox", options have role="option" with aria-selected. Groups have role="group" with aria-label. When auto_highlight is true, the first matching option has data-highlighted and aria-selected="true" for keyboard activation. Search input has aria-label="Search options".

Related

Select (for non-searchable select), Dialog (for modal combobox), Label (for form integration)

Shadcn reference

https://ui.shadcn.com/docs/components/base/combobox

← Back to Gallery