maud-ui64 components

Input

Profile

A typical sign-up form using text, email, and password inputs.

Input Types

Each HTML input type rendered with a contextual placeholder.

Text
Email
Password
URL
Phone
Search
Number
File

States

Default, populated, invalid, disabled, and read-only.

Default
Please enter a valid email address.

Usage

use maud_ui::primitives::input;

let html = input::render(input::Props {
    name: "email".into(),
    input_type: input::InputType::Email,
    placeholder: "you@example.com".into(),
    id: "email-field".into(),
    required: true,
    ..Default::default()
});

Input

Text input component supporting multiple HTML input types with full XSS protection via maud's escaping.

Import

use maud_ui::primitives::input::{self, Props, InputType};

Example

use maud::html;
use maud_ui::primitives::input;

html! {
    (input::render(input::Props {
        name: "email".to_string(),
        id: "email".to_string(),
        input_type: input::InputType::Email,
        placeholder: "you@example.com".to_string(),
        required: true,
        aria_describedby: Some("email-hint".to_string()),
        ..Default::default()
    }))
}

Props

FieldTypeDefaultDescription
nameString""HTML name attribute for form submission.
idString""HTML id for label linkage.
input_typeInputTypeTextHTML input type variant.
placeholderString""Placeholder text when empty.
valueString""Current input value.
disabledboolfalseDisables user interaction.
requiredboolfalseHTML required attribute.
invalidboolfalseSets aria-invalid="true".
readonlyboolfalseRead-only state.
aria_describedbyOption<String>NoneLinks to description/error element.

InputType

pub enum InputType {
    Text,
    Email,
    Password,
    Url,
    Tel,
    Search,
    Number,
    File,
}

Security

All attribute values (name, placeholder, value, id, aria_describedby) are automatically escaped by maud's html! macro. User-controlled strings cannot break out of attributes.

Recent improvement: Migrated from format!-based rendering to maud's html! macro (fully escaped). XSS tests verify the fix.

Accessibility

  • Label must link via for= to input id.
  • aria-invalid="true" when in error state.
  • aria-describedby links to hint/error text if provided.
  • required attribute honored by browsers and screen readers.

File Input

The InputType::File variant renders with class mui-input--file for CSS customization.

Related

  • Field — wraps Input with label/description/error.
  • Input Group — input with prefix/suffix addons.
  • Textarea — multi-line text input.

Shadcn Reference

Mirrors shadcn's Input component with all HTML5 input types and proper accessibility attributes.

← Back to Gallery