maud-ui84 components
↑↓ navigate↵ openEsc close

Label

Anatomy

Standalone form label element for associating text with form controls. Supports required field indicators with built-in accessibility.

maud_ui::primitives::label

Props

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

PropTypeDefaultDescription
textString""Label text
html_forOption<String>NoneID of associated form control
requiredboolfalseWhether the field is required
disabledboolfalseWhether the label should appear disabled

Examples

Variants

Default

Required

Disabled

With input

Usage and composition

Import

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

Example

use maud::html;
use maud_ui::primitives::label;

html! {
    div class="mui-field" {
        (label::render(label::Props {
            text: "Email address".into(),
            html_for: Some("email-input".into()),
            required: false,
            disabled: false,
        }))
        input class="mui-input" id="email-input" type="email" placeholder="you@example.com" {}
    }
}

Variants

VariantConfigurationUse Case
DefaultAll falseStandard label for optional fields.
Requiredrequired: trueLabel for mandatory form fields; displays required indicator.
Disableddisabled: trueLabel associated with disabled input (e.g., read-only fields).
Required DisabledBoth trueCombination of required and disabled states.

Helpers

None. The component is a minimal wrapper around the HTML <label> element.

Related

Input, Checkbox, Radio Button, Textarea, Native Select, Number Field.

Shadcn reference

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

Accessibility

  • html_for attribute: Creates semantic association with the form control, improving usability for all users and assistive technology.
  • Required indicator: Uses aria-label="required" on the <span> containing the asterisk, ensuring screen readers announce the required status without redundant text.
  • Disabled state: Applies visual class but does NOT add disabled attribute (only the input should be disabled). Visual styling communicates disabled state.
← Back to Gallery