Forms and input actions

Form elements

Accessibility: Use visible associated labels, connect hints/errors with aria-describedby and preserve native validation. WAI forms guidance.

Submit is prevented in this non-networked example. Cancel is intentionally inert; Reset restores the initial values.

Inline forms and input actions

Accessibility: Keep labels visible and use one naming source for each X. Synchronize clear visibility and move focus to the input before hiding the control. WAI label guidance.

Use an inline-field wrapper for a visible standard-size, medium-weight label above an input-row. The input grows; Add wraps to the right when space runs out. An optional input-action groups a text input with its X. Ordinary stacked forms keep their existing appearance.

The X is our shared close/clear icon action: a native button with data-barba-variant="icon" and data-barba-shape="icon". It has a generous target, transparent resting face, a circular hover background inset by 2px, and a separate keyboard-focus outline. Disabled X actions use muted gray, retain the disabled opacity, and have no hover background. Its accessible name describes the action: “Clear item name” for an input, “Close dialog” for a modal. The icon is decorative; these actions do not delete saved data.

Input and Add

Add validates and reports locally; no information is saved or sent.

Input with an X

Only show the X when there is content. Keep its space reserved, and return focus to the input before hiding it. Applications handle clearing and synchronize visibility after typing, resets and programmatic value changes.

Initially empty

Controls associated with a separate form

Use the form attribute on both the input and its submit button. The label and row layout are identical.

Nothing added yet.

Outside a form

A standalone field can use the same input-action layout without a submit button.

Unavailable actions

For disabled or read-only inputs, a populated field retains a muted gray, disabled X instead of the enabled action color. It cannot change the value and has no hover background.

See the dialog examples for the same X button used to close a modal through its cancellation path.