Stacked POST form

form::stacked(…) — the submission contract from form, the rhythm from stack.

Method::Get — a search form

GET is right when the result URL should be linkable and bookmarkable. It is wrong for anything secret: values land in history, logs, and the Referer header.

Enctype::Multipart — file upload

Required for any form with a file input. Without it the browser submits the filename and not the file.

novalidate + autocomplete: false

Skip the browser's constraint validation (when the server owns the rules), and opt out of autofill.

Method::Dialog

Inside a <dialog>, method="dialog" closes it and submits nothing over the network.

Form actions

Primary/secondary pairing for settings, onboarding, checkout.

Destructive

Irreversible actions — only after a confirm dialog.

Loading state

Disabled + spinner icon while awaiting a response.

Icon + text

Leading glyph for recognition at a glance.

Trailing icon + leading/trailing pair

Trailing chevrons hint at navigation; pairing both icons frames a label in a command.

Size ladder (shadcn parity)

xs / sm / default / lg — plus four icon-only sizes with required aria-label.

Profile

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

Input Types

Each HTML input type rendered with a contextual placeholder.

States

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

Share your feedback

Tell us what worked and what didn't. We read every response.

Profile

Shown on your public profile and attribution lines.

Invalid (aria)

Form framework set aria_invalid without styling as hard error.

Admin notes

Read-only. Changes require a support ticket.

Checkbox

Radio — Plan

Radio — States

Radio — With Descriptions

Preferences

A realistic settings form with theme, language, and a locked timezone field.

Select Anatomy

Individual select states shown in isolation.

Grouped options

Options organized under labeled groups with separator helper.

Notification Settings

States

Sizes

Default and compact (sm) variants.

Form Integration

Required and invalid states propagate to the hidden input.

Create Account

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

Multiple Errors

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

Horizontal Orientation

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

Composed Fieldset

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

Field Anatomy

Each feature of the Field component shown in isolation.

Profile Fieldset

Disabled Fieldset

Variants

With input

Variants

Leading icon

Monospace

Hollow chip

The taller bordered-transparent counterpart to the filled pill — carries a trailing count or a kbd hint.

In Context

Labels

Sizes

Raw values

Any valid CSS colour string. Click a chip to copy the value.

Design tokens (live)

Each chip reads var(--mui-*) at paint time, so toggling the gallery theme flips the grid.

Scale ramps (Tailwind-style)

Horizontal ramps from 50 to 950 — click any tone to copy its hex.

User Card

Sofia Davis

sofia@example.com

Status Indicator

JD

Status Badge

Team

+3

Sizes

smSM

mdMD

lgLG

Profile card sections

Separator divides the Bio block from account Settings in a user profile.

Auth methods

“OR” label separates social sign-in from email + password.

Labelled — turn dividers

A mono, letter-spaced, muted label and a hairline rule that carries the eye across. Used between transcript turns.

Navigation

Vertical separator between primary nav and user menu.

Direction

Vertical (default)

Horizontal

Gap scale

None — 0

Xs — 0.25rem

Sm — 0.5rem

Md — 0.75rem (default)

Lg — 1rem

Xl — 1.5rem

Xxl — 2rem

Align (cross axis)

Stretch (default)

Start

Center

End

Baseline

Justify (main axis)

Start (default)

Center

End

Between

Around

Evenly

Wrap

wrap: true — children flow onto new lines instead of overflowing

Padding

padding: Xl — inset applied by the container itself

Helpers

stack::horizontal(…) — row, centred, default gap

stack::vertical(…) inside a card body

Semantic tags

tag: Tag::Nav — renders <nav>, keeping the landmark intact

tag: Tag::Section — requires aria_label (debug_assert)

Auto-fit (default)

As many equal columns as fit, each at least 14rem. Resize the window — no media query involved.

Minimum column width

Sm — 10rem (dense)

Md — 14rem (default)

Lg — 18rem

Xl — 24rem

Fixed columns

Collapse to one column below 40rem by default — four columns on a phone is four unreadable slivers.

Two

Three

Four

Six

collapse_narrow: false

For genuinely small cells that should stay side by side at every width — a swatch palette, a keypad.

Gap scale

The same Space scale as stack — one vocabulary across both containers.

None

Sm

Md (default)

Xl

Align (block axis)

Stretch (default) — items fill the row

Start

Center

End

Composition

A dashboard card grid — grid for the columns, stack for each card's rows.

App shell (left, icon-collapsible)

Press Cmd/Ctrl + B to toggle, or click the menu button.

Item group — three variants

Default with icon media, Outline with image media, Muted title-only (sm).

Status tones — service health rows

status_dot in the media slot, Props.tone tinting the row. Each dot ships a visually-hidden label.

With header / footer / separator

Common ratios

With image

Writing direction

The HTML dir attribute cascades to all descendants — inputs, lists, and even scrollbars flip automatically.

Right (default)

Left (navigation)

Bottom (sheet with grab handle)

Scaled background (Vaul-style)

No close button (footer-only dismiss)

Right (default)

Framework picker

Search and select from a list of frontend frameworks.

Assign team member

A realistic search-to-select pattern for assigning people to a task.

Grouped options

Options separated into logical groups with uppercase labels.

Text alignment toolbar

Editor toolbar — exactly one alignment active at a time. Click or use ← / → to switch.

Text formatting

Rich-text controls — each toggle independent (Bold currently on). Click any to flip.

View switcher

Project listing view — Grid / List / Board (Grid active).

Pager with separator

Sm-size pager — [Prev] [separator] [Next]. The separator is a vertical rule between buttons in a horizontal group.

Pager with text indicator

Non-interactive text cell — [Page 1 of 10] [Prev] [Next]. Useful for status read-outs inside toolbars.

Text Editor Toolbar

Default variant — formatting controls

Outline variant

Sizes

Disabled

Text alignment

Paragraph alignment in the document editor.

Text formatting

Bold, italic, underline, strikethrough — multi-select.

Calendar view

Switch between Day, Week, and Month layouts.

Verify your email

We sent a code to sofia@example.com

Enter PIN

Your transaction PIN

2FA locked

Too many failed attempts. Try again in 15 minutes.

Redeem coupon

Alphanumeric code — pattern: DigitsAndChars.

Wrong code

aria_invalid: true — announces failure to screen readers.

Vertical (default)

Horizontal

Disabled

Required + Comfortable

required: true propagates to each input; variant: Comfortable opens spacing.

Compact

variant: Compact — tighter rows for admin/settings panels.

Check-in

Pick a check-in date — earliest arrival is today (Apr 16).

Departure

Departure must be after check-in — min Apr 21, max 60 days out.

Disabled weekends

Business-day picking — window locked to the Mon–Fri work week of Apr 20–24.

Ready — the 84px dock

The resting state. Welded to the bottom of the pane; the operator's hands never hunt for it.

Growing — focused, ringed, grows then scrolls

Two rows minimum; grows to a max then scrolls internally. The transcript loses the height, never the composer.

Executing — writable, not disabled

A turn is running, but the field stays writable so a follow-up can be queued. Interrupt sits beside the primary as a hollow-destructive.

Asleep — 46px, dashed, same anchor line

The session is paused. A mono state tag and a neutral Wake button; still the same anchor line.

Verbosity switch

Three tabs collapsed into one control — Clean · Chat · Raw — with the reading position kept across switches.

Two stops

The minimum useful switch.

Turn progress

A 2px hard-gradient strip — accent to N%, accent-10% after. Rendered above the executing composer.

Tones

Outline — observing

Hollow reads as “watching, not yet settled” without spending a second hue.

Wants attention

Accent-12% fill, accent dot, accent text — the one thing on the row the eye should land on.

Zero state — muted

Nothing waiting: the same pill spends no accent, so it recedes instead of glowing at an empty count.

Session facts

Mono subtle labels, foreground values, rows on the 4px rhythm.

Inspector gutter sections

A mono uppercase header (10px, letter-spaced, subtle) over any content.