maud-ui64 components

Radio

Radio — Plan

Radio — States

Radio — With Descriptions

Usage

use maud_ui::primitives::radio;

let html = radio::render(radio::Props {
    name: "plan".into(),
    value: "pro".into(),
    label: "Pro plan".into(),
    id: "plan-pro".into(),
    checked: true,
    description: Some("Unlimited projects".into()),
    ..Default::default()
});

Radio

Single radio button element for selection within a group. Must be paired with Radio Group for mutually exclusive choices.

Import

use maud_ui::primitives::radio::{self, Props};

Example

use maud::html;
use maud_ui::primitives::radio;

html! {
    (radio::render(radio::Props {
        id: "plan-pro".to_string(),
        name: "plan".to_string(),
        value: "pro".to_string(),
        label: "Pro".to_string(),
        description: Some("Unlimited projects".to_string()),
        checked: false,
        disabled: false,
        required: false,
    }))
}

Props

FieldTypeDefaultDescription
idString"radio-default"Unique identifier for the radio input.
nameString"radio"Input name attribute (groups mutually exclusive radios).
valueString"option"Input value attribute (sent on form submit).
labelString"Option"Visible label text rendered in <span class="mui-radio__label">.
descriptionOptionNoneOptional supporting text rendered in <span class="mui-radio__description">.
checkedboolfalseWhether the radio is initially checked.
disabledboolfalseWhether the radio is disabled (aria-disabled set, visual greying).
requiredboolfalseSets required attribute on the underlying <input type="radio">.

States

StateCheckedDisabledDescription
UncheckedfalsefalseDefault state.
CheckedtruefalseSelected option.
Disabled UncheckedfalsetrueDisabled, not selected.
Disabled CheckedtruetrueDisabled, selected (locked in place).

Usage

Use Radio as an individual component only when you need custom layout or a single radio outside a group. For standard mutually exclusive choices, prefer RadioGroup.

Individual radio in a custom layout:

html! {
    fieldset {
        (radio::render(radio::Props {
            id: "notify-all".to_string(),
            name: "notify".to_string(),
            value: "all".to_string(),
            label: "All new messages".to_string(),
            description: Some("Get notified for every message.".to_string()),
            checked: true,
            ..Default::default()
        }))
        (radio::render(radio::Props {
            id: "notify-mentions".to_string(),
            name: "notify".to_string(),
            value: "mentions".to_string(),
            label: "Mentions only".to_string(),
            description: Some("Only when someone mentions you.".to_string()),
            checked: false,
            ..Default::default()
        }))
    }
}

Accessibility

  • Rendered as <label for="{id}"> containing <input type="radio">.
  • Custom indicator: <span class="mui-radio__indicator" aria-hidden="true"> (visual only).
  • Label and description are child text nodes (automatically associated to input via label wrap).
  • disabled attribute disables native form submission handling.
  • required attribute enables native form validation (one option must be chosen).

Related

RadioGroup (preferred for mutually exclusive groups), Checkbox (for independent toggles).

Shadcn reference

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

← Back to Gallery