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.
Must be at least 8 characters.
A brief introduction for your public profile.
Field Anatomy
Each feature of the Field component shown in isolation.
Basic
Required
With Description
Include country code for international numbers.
With Error
Please enter a valid URL starting with https://.
Description + Error
Found in your invitation email.
This code has already been used.
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";
},
});