Field

Anatomy

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

maud_ui::primitives::field

Props

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

Prop	Type	Default	Description
`label`	`String`	`"Label"`	No description
`id`	`String`	`"field-1"`	No description
`description`	`Option<String>`	`None`	No description
`error`	`Option<String>`	`None`	Legacy single-error field. Still supported; prefer `errors` for multiple messages.
`errors`	`Vec<String>`	`[]`	Multiple validation errors. Rendered after `error` (if set).
`required`	`bool`	`false`	No description
`orientation`	`Orientation`	`Vertical`	No description
`children`	`Markup`	`PreEscaped("<input class=\"mui-input\" type=\"text\">")`	No description

Examples

Create Account

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

Full Name*

Email*

We'll never share your email with anyone.

Password*

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

Must be at least 8 characters.

Bio

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.

Password*

Passwords must meet all requirements.

Must contain at least one uppercase letter.

Must contain at least one digit.

Must be at least 12 characters long.

Horizontal Orientation

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

Display Name

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

Display Name

How you'll appear to others.

Handle

Security

Password

Password is too short.

Field Anatomy

Each feature of the Field component shown in isolation.

Basic

Username

Required

Email Address*

With Description

Phone

Include country code for international numbers.

With Error

Website

Please enter a valid URL starting with https://.

Description + Error

Invite Code*

Found in your invitation email.

This code has already been used.

Textarea Field

Notes

Any additional context (optional).

Usage and composition

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";
        },
    }))
}

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.

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.

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.

← Back to Gallery