Select

Import

use maud_ui::primitives::select::{self, Props, Size, SelectOption, SelectGroup};

Example

use maud::html;
use maud_ui::primitives::select;

html! {
    (select::render(select::Props {
        name: "theme".to_string(),
        id: "select-theme".to_string(),
        options: vec![
            select::SelectOption { value: "light".to_string(), label: "Light".to_string(), disabled: false },
            select::SelectOption { value: "dark".to_string(), label: "Dark".to_string(), disabled: false },
        ],
        selected: Some("light".to_string()),
        placeholder: "Choose theme…".to_string(),
        size: select::Size::Default,
        aria_invalid: false,
        ..Default::default()
    }))
}

SelectOption Struct

SelectGroup Struct

Size Enum

Helpers

scroll_up_button() -> Markup

Renders the up-scroll affordance for long dropdowns (▲). Decorative, aria-hidden="true".

(select::scroll_up_button())

scroll_down_button() -> Markup

Renders the down-scroll affordance for long dropdowns (▼). Decorative, aria-hidden="true".

(select::scroll_down_button())

separator() -> Markup

Renders a thin horizontal rule (<div role="separator">) between option groups.

(select::separator())

Usage Patterns

Flat option list

html! {
    (select::render(select::Props {
        name: "priority".to_string(),
        id: "select-priority".to_string(),
        options: vec![
            select::SelectOption { value: "low".to_string(), label: "Low".to_string(), disabled: false },
            select::SelectOption { value: "medium".to_string(), label: "Medium".to_string(), disabled: false },
            select::SelectOption { value: "high".to_string(), label: "High".to_string(), disabled: false },
        ],
        placeholder: "Set priority…".to_string(),
        ..Default::default()
    }))
}

Grouped options

html! {
    (select::render(select::Props {
        name: "timezone".to_string(),
        id: "select-tz".to_string(),
        groups: vec![
            select::SelectGroup {
                label: "North America".to_string(),
                options: vec![
                    select::SelectOption { value: "est".to_string(), label: "Eastern".to_string(), disabled: false },
                    select::SelectOption { value: "cst".to_string(), label: "Central".to_string(), disabled: false },
                ],
            },
            select::SelectGroup {
                label: "Europe".to_string(),
                options: vec![
                    select::SelectOption { value: "gmt".to_string(), label: "London (GMT)".to_string(), disabled: false },
                ],
            },
        ],
        selected: Some("est".to_string()),
        placeholder: "Select timezone…".to_string(),
        ..Default::default()
    }))
}

With error state

html! {
    (select::render(select::Props {
        name: "country".to_string(),
        id: "select-country".to_string(),
        options: vec![
            select::SelectOption { value: "us".to_string(), label: "United States".to_string(), disabled: false },
            select::SelectOption { value: "ca".to_string(), label: "Canada".to_string(), disabled: false },
        ],
        placeholder: "Select country…".to_string(),
        aria_invalid: true,  // Shows error styling
        ..Default::default()
    }))
}

Nova derives popup CSS dimensions in the popup’s own layout units when its ancestor scale differs from the trigger. Aligned placement uses the layout viewport; keyboard opening scrolls the active option into view before focusing it, including a zoomed visual viewport.

Data Attributes

• data-mui="select" — root element marker.
• data-name — input name attribute (helps with form binding).
• data-value — on each option (client JS uses for selection).

Hidden Input

A <input type="hidden"> carries the current selection value so the form submit includes the selected value.

Related

Combobox (searchable), Native Select (native HTML), Radio Group (mutually exclusive without dropdown).

Shadcn reference

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