Input Group

Anatomy

Input with configurable prefix/suffix and full-width addons (buttons, text, hints) as a visual unit.

maud_ui::primitives::input_group

Props

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

Prop	Type	Default	Description
`prefix`	`Option<Markup>`	`No struct Default; supply explicitly`	No description
`suffix`	`Option<Markup>`	`No struct Default; supply explicitly`	No description
`children`	`Markup`	`No struct Default; supply explicitly`	No description

Examples

Input with $ prefix

Input with .com suffix

.com

Input with https:// prefix and Go button

https://

Email with @ prefix

Addon alignment — prefix text, suffix button, block-end hint

Uses `addon`, `text`, `button`, and `input_el` helpers. Prefix text is InlineStart, Go is InlineEnd, hint wraps below the row via BlockEnd.

https://

We'll prepend https:// and check the domain resolves.

Usage and composition

Import

use maud_ui::primitives::input_group::{self, InputGroupProps, Align};
use maud_ui::primitives::input;

Example

use maud::html;
use maud_ui::primitives::input_group;

html! {
    div.mui-input-group {
        (input_group::text(html! { "https://" }))
        (input_group::input_el(input::Props {
            placeholder: "example.com".into(),
            ..Default::default()
        }))
        (input_group::button("Go", button::Size::Sm, button::Variant::Primary))
    }
}

Props (InputGroupProps)

Field	Type	Default	Description
`prefix`	`Option<Markup>`	`None`	Content before the input.
`suffix`	`Option<Markup>`	`None`	Content after the input.
`children`	`Markup`	`html! {}`	Main row content.

Align

pub enum Align {
    InlineStart,   // Leading (left in LTR), order: -1
    InlineEnd,     // Trailing (right in LTR), order: 99
    BlockStart,    // Above row (full-width), order: -2
    BlockEnd,      // Below row (full-width), order: 100
}

Helpers

addon(children, align) — Render markup as an addon at the specified alignment.
button(label, size, variant) — Sized button in InlineEnd addon (default). Common for password reveal, search submit, copy.
text(children) — Muted supplementary text in InlineStart addon (default). Common for currency prefix, @, https://.
input_el(props) — Render Input control with data-slot="input-group-control" for shadcn-compatible selectors.
textarea(props) — Render Textarea control with same slot marker.

Input — single text input.
Button — standalone button.
Textarea — multi-line textarea for groups.

Shadcn Reference

Mirrors shadcn Base UI's InputGroup with Align enum (InlineStart/InlineEnd/BlockStart/BlockEnd) and helper composition (addon, text, button, input_el, textarea).

The control helper places data-slot="input-group-control" on the native input or textarea itself. This preserves native flex minimum sizing and focus selectors. Button helpers retain the supplied label as their accessible name, including icon sizes. Textarea resize remains an explicit textarea::Props setting; use Resize::None for the stock Nova group composition.

Accessibility

Addons use semantic <div> and <span> wrappers; buttons render as true <button> elements.
Text addons lack interactive semantics; place them outside form submission flow.
Input retains all label/error linkage when wrapped in a group.

← Back to Gallery