maud-ui84 components
↑↓ navigate↵ openEsc close

Radio Group

Anatomy

Mutually exclusive set of radio buttons grouped under a semantic <fieldset> with a <legend>. Supports vertical/horizontal layout, density variants, and native form validation.

maud_ui::primitives::radio_group

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

PropTypeDefaultDescription
nameString""No description
labelString""No description
optionsVec<RadioOption>[]No description
selectedOption<String>NoneNo description
orientationOrientationVerticalNo description
disabledboolfalseNo description
requiredboolfalseMarks each underlying <input type="radio"> as required so native form validation blocks submit until one option is chosen.
variantVariantDefaultDensity variant — see Variant.

Examples

Vertical (default)

Select a plan

Horizontal

Size

Disabled

Notifications

Required + Comfortable

required: true propagates to each input; variant: Comfortable opens spacing.

Billing cadence

Compact

variant: Compact — tighter rows for admin/settings panels.

Priority
Usage and composition

Import

use maud_ui::primitives::radio_group::{self, Props, RadioOption, Orientation, Variant};

Example

use maud::html;
use maud_ui::primitives::radio_group;

html! {
    (radio_group::render(radio_group::Props {
        name: "plan".to_string(),
        label: "Select a plan".to_string(),
        options: vec![
            radio_group::RadioOption { value: "free".to_string(), label: "Free".to_string(), description: Some("Up to 3 projects".to_string()) },
            radio_group::RadioOption { value: "pro".to_string(), label: "Pro".to_string(), description: Some("Unlimited projects".to_string()) },
        ],
        selected: Some("pro".to_string()),
        orientation: radio_group::Orientation::Vertical,
        required: true,
        variant: radio_group::Variant::Default,
        ..Default::default()
    }))
}

RadioOption Struct

FieldTypeDescription
valueStringInput value (sent on form submit).
labelStringVisible radio label.
descriptionOptionOptional supporting text below the label.

Orientation Enum

ValueDescription
VerticalRadios stacked vertically (default).
HorizontalRadios laid out inline horizontally.

Variant Enum

Density axis—mirrors shadcn Base UI "size":

ValueClassDescription
Default—Default spacing between options.
Comfortablemui-radio-group--comfortableMore breathing room; bigger hit targets.
Compactmui-radio-group--compactTighter rows for dense admin UIs.

Usage Patterns

Vertical (default)

html! {
    (radio_group::render(radio_group::Props {
        name: "notify".to_string(),
        label: "Notifications".to_string(),
        options: vec![
            radio_group::RadioOption { value: "all".to_string(), label: "All messages".to_string(), description: None },
            radio_group::RadioOption { value: "mentions".to_string(), label: "Mentions only".to_string(), description: None },
        ],
        selected: None,
        orientation: radio_group::Orientation::Vertical,
        ..Default::default()
    }))
}

Horizontal with Comfortable spacing

html! {
    (radio_group::render(radio_group::Props {
        name: "size".to_string(),
        label: "Size".to_string(),
        options: vec![
            radio_group::RadioOption { value: "s".to_string(), label: "S".to_string(), description: None },
            radio_group::RadioOption { value: "m".to_string(), label: "M".to_string(), description: None },
            radio_group::RadioOption { value: "l".to_string(), label: "L".to_string(), description: None },
        ],
        selected: None,
        orientation: radio_group::Orientation::Horizontal,
        variant: radio_group::Variant::Comfortable,
        ..Default::default()
    }))
}

Required + Compact

html! {
    (radio_group::render(radio_group::Props {
        name: "priority".to_string(),
        label: "Priority".to_string(),
        options: vec![
            radio_group::RadioOption { value: "low".to_string(), label: "Low".to_string(), description: None },
            radio_group::RadioOption { value: "normal".to_string(), label: "Normal".to_string(), description: None },
            radio_group::RadioOption { value: "high".to_string(), label: "High".to_string(), description: None },
        ],
        selected: Some("normal".to_string()),
        required: true,
        variant: radio_group::Variant::Compact,
        ..Default::default()
    }))
}

Related

Radio (single button), Checkbox (independent toggles), Select (long option lists).

Shadcn reference

https://ui.shadcn.com/docs/components/base/radio-group

Accessibility

  • Rendered as <fieldset> with <legend> for semantic grouping.
  • All radio buttons share the same name attribute (mutually exclusive at form level).
  • Each radio has unique id="{name}-{value}" and is labeled by <label for="{id}">.
  • required attribute enables native form validation (one must be selected before submit).
  • Descriptions are wrapped in <span class="mui-radio__description"> for visual distinction.
  • aria-disabled not set (native disabled attribute sufficient; fieldset-level disable affects all).
← Back to Gallery