Forms

Overview

Cohesive set of form elements that share focus styles, helpers, and validation patterns.

States And Sizes

Read-only, disabled, and shared size modifiers for form controls.

Labels

The field wrapper is `.field`. Choose between a wrapped `<label>` and a detached `for`/`id` pair based on the layout.

Joined Controls

Use `.join` when controls need to be visually joined into a single unit.

Input Policy

Native input intent first. Actual's runtime filters values only when explicitly asked, and fixed-shape masks stay opt-in through `data-mask`.

Password Toggle

A password field reveals its value through a linked button. The markup is a

Detached Actions

`.form-actions` is class-only. It may live inside or outside the `<form>`. Use the native `form` attribute to connect a detached submit button to its form.

Sticky Actions

Use `.form-actions sticky` when long forms need reachable submit actions while scrolling.

Choice Cards

Card-style radio and checkbox labels where the whole card acts as a clickable target.

Switches

Toggle controls that share a native checkbox at the markup level, with a switch visual.

Range

Native range inputs with theme-aware accent color.

Validation

Inline error feedback that respects assistive technology and form state.