maud-ui64 components

Field

Create Account

A realistic registration form showing label, description, error, and required field patterns together.

We'll never share your email with anyone.

Use 8 or more characters with a mix of letters and numbers.

A brief introduction for your public profile.

Multiple Errors

A field with multiple validation errors rendered via the errors Vec. Root carries data-invalid for CSS and form-framework hooks.

Passwords must meet all requirements.

Horizontal Orientation

Label on the left, control on the right — good for dense forms and settings panels.

Primary contact address.

Composed Fieldset

Built from helper fns (fieldset, legend, group, title, separator, label, description, content) rather than the monolithic render(Props).

Account

Profile

How you'll appear to others.

Security

Field Anatomy

Each feature of the Field component shown in isolation.

Basic

Required

With Description

Include country code for international numbers.

With Error

Description + Error

Found in your invitation email.

Textarea Field

Any additional context (optional).

Usage

use maud_ui::primitives::field;
use maud::html;

let html = field::render(field::Props {
    label: "Email".into(),
    id: "signup-email".into(),
    description: Some("We will never share your email.".into()),
    error: None,
    required: true,
    children: html! {
        input.mui-input type="email" id="signup-email" name="email" placeholder="you@example.com";
    },
});

Field

Form control wrapper with label, description, error handling, and multiple layout orientations.

Import

use maud_ui::primitives::field::{self, Props, Orientation};

Example

use maud::html;
use maud_ui::primitives::field;

html! {
    (field::render(field::Props {
        label: "Email Address".to_string(),
        id: "email".to_string(),
        description: Some("We'll never share your email.".to_string()),
        error: None,
        required: true,
        orientation: field::Orientation::Vertical,
        children: html! {
            input.mui-input type="email" id="email" name="email" placeholder="you@example.com";
        },
    }))
}

Props

FieldTypeDefaultDescription
labelString"Label"Label text displayed above/beside the control.
idString"field-1"HTML id attribute. Links label and associates errors.
descriptionOption<String>NoneHelper text shown below the control.
errorOption<String>NoneLegacy single-error field (for backward compat).
errorsVec<String>vec![]Multiple validation errors, rendered after error.
requiredboolfalseAppends a red asterisk to the label.
orientationOrientationVerticalLayout direction (Vertical, Horizontal, Responsive).
childrenMarkup<input type="text">The control itself (input, textarea, select, etc.).

Orientation

pub enum Orientation {
    Vertical,      // Stack label, control, description, error vertically
    Horizontal,    // Two-column: label left, control + meta right
    Responsive,    // Vertical on narrow, horizontal at ≥640px
}

Helpers

Composable field builders for structural flexibility:

  • label(for_id, text) — <label> bound via for=.
  • description(text) — Helper text <p>.
  • error(text) — Error message <p role="alert">.
  • group(children) — Vertical stack of fields without border.
  • legend(text) — <legend> for use in fieldset.
  • fieldset(legend_text, children) — <fieldset> + <legend> wrapper.
  • content(children) — Control slot separator for composed layouts.
  • separator() — Visual <hr> divider.
  • title(text) — Section heading for field groups.

Accessibility

  • Label always linked via for → control id.
  • Errors render with role="alert" for screen reader announcement.
  • Description and error ids included in aria-describedby when used with input.
  • Required indicator marked with aria-label="required".
  • data-invalid attribute for CSS and form-framework styling hooks.

Related

  • Input — text/email/password/file inputs.
  • Fieldset — group of related form controls.
  • Input Group — input with addons.

Shadcn Reference

Shadows shadcn's Field pattern with orientation variants and helper-function composition.

← Back to Gallery