Input

Three sizes (medium is the default). The field height, the type scale (font / line-height), and the icon all track the size. Each step matches Anta’s text scale, so a field lines up with same-size Text / Button.

label sits above the field; hint is neutral helper text below it (--text-3, no icon). Both accept a string or a React node, so you can embed links, <code>, or a <Text> for full control.

The label is wired as the control’s accessible name automatically — the element mirrors the label text into aria-label, since a native <label for> can’t cross the shadow boundary. The hint (or error) is mirrored the same way into aria-description, so a screen reader announces the message too.

Standard role and aria-* attributes on <Input> or raw <a-input> are applied to the native input, textarea, or button inside its shadow root. This keeps the focused native control as the single accessible control. If you query the DOM directly, read those semantics from a-input.control rather than from the custom-element host.

Attach a tooltip by dropping an Anta <Tooltip> in as a child — no slot or prop needed. It anchors to the field and shows on hover, consistent with how tooltips attach to a <Button> or any other element. (Children with no slot are projected into a default slot; use leading / trailing for in-field content.)

status tints the border and the hint, and prefixes a glyph — critical, warning, success, info, or brand. Each pulls its tone’s role tokens, so dark mode is automatic. The message always rides in hint; status only recolors it.

It reuses the tone palette but isn’t tone: status is a validation state (it also carries the glyph and, for critical, validity), whereas tone — elsewhere in Anta — is decorative color. On Input the named tones live on status; tone is reserved for a one-off custom border color.

Only status="critical" carries validity — it sets aria-invalid, flips the :state(invalid) hook, and reports invalid to a surrounding <form> through ElementInternals. The other tones are advisory and stay valid.

Each status has a default glyph (critical → warning-diamond, warning → warning-triangle, success → circle-check, info → info, brand → circle-small-solid). Override it with statusIcon (any shape), or drop it with statusIcon={false}.

leading and trailing paste any node at the field edges (like the expander’s actions) — an icon, a button, a unit label. A leading item is inset from the left by the same pad-x as the text, so it lines up on the field’s rhythm; the playground at the top of this page shows a live leading icon alongside the clear button.

type="search" is a shorthand for that search pattern: it defaults a leading search icon and clearable (override either — pass your own leading, or clearable={false}). It’s wrapper-only — the native search type never reaches the DOM input, so the browser’s own clear/search chrome never appears; Anta owns it.

dimActions rests the adornments quiet (60% opacity) and brightens them to full when the field is hovered or focused — a “quiet until engaged” look for trailing actions. It dims the whole slot, so it covers icons and buttons alike.

clearable adds a clear button at the right edge, shown once the field has a value. It’s a real <a-button> in the clear slot — full button styling, keyboard-focusable — and it works without framework hydration: a-button’s global handler fires a clearrequest trigger on click and Enter/Space, which the element turns into the lifecycle below.

Two hooks bracket the clear. onClearClick fires first and is cancelable — e.preventDefault() keeps the value (e.g. a “discard unsaved text?” confirm). If it isn’t prevented, the field clears: it empties, fires input / change (a controlled onChange runs with the empty value), refocuses, then fires onClearInput. On a raw <a-input>, bind both lowercase (onclearclick / onclearinput) — that form binds in React and Preact alike.

Note: there’s no type="search" — that type makes browsers inject their own clear button and magnifier (and style them inconsistently). Anta owns every in-field control, and the element resets the native search/number/reveal decorations across browsers.

A trailing eye <Button> flips the field’s type between password and text — native disc masking when hidden, plain text when revealed. Because it stays a real type="password" when hidden, password managers and autofill keep working, and the uncontrolled value is preserved across the toggle.

The mask glyph stays the browser default — restyling it means dropping type="password", which loses password-manager support and isn’t masked in Firefox. So Anta keeps the native field.

multiline renders a <textarea> under the same API. With no rows it autogrows with its content via CSS field-sizing: content — capped by maxRows if you set one (omit for unbounded growth), then it scrolls. Pass a fixed rows count for a constant-height box instead.

Autogrow uses CSS field-sizing where supported (Chromium, Safari ≥ 26.2) and a built-in JS resize everywhere else (Firefox, older Safari), so it grows in every browser.

Like a native input: pass defaultValue for uncontrolled, or value + onInput / onChange for controlled. The controlled value is reflected to the shadow control only when it differs from what’s there, so the caret never jumps mid-edit.

Read the value off e.target.value in either handler — the event retargets to the <a-input> host, whose value getter returns the control’s value.

Note: like other custom-element form controls (and unlike React’s built-in <input>), a controlled value that you transform applies on the next render, but one you reject — set state back to the same string — isn’t auto-reverted, since the framework skips the re-render. Constrain hard with maxLength / pattern / type, or transform in the handler.

Because <a-input> is form-associated, it submits with the surrounding <form> under its name — new FormData(form) includes it, no hidden mirror needed. required participates in native validity, and <Button type="reset"> restores the field to its defaultValue via formResetCallback.

type accepts text (default), email, password, tel, url, and number — each gets the right mobile keyboard, autofill behavior, and native constraint validation. (search is omitted on purpose — see above.) number also takes min / max / step.

Set autoComplete to describe the field’s purpose. email, tel, and url derive their matching token from type. Other purposes need an explicit token, such as name, username, current-password, new-password, or one-time-code. Use autoComplete="off" for examples and application fields that do not represent autofill data.

For a controlled numeric field — one whose value you hold in state — prefer type="text" with inputMode="decimal" (or "numeric") over type="number". A number input runs value sanitization, so a mid-typing "1." or "1.0" reports an empty value and can’t be entered; storing the parsed Number and rendering it back drops the decimal for the same reason. Keep the raw string in state and parse to a number where you use it — inputMode still brings up the numeric keypad. An uncontrolled type="number" (no bound value) has neither problem.

Every type carries its native constraints (required, the type itself, pattern, min/max, min/maxLength). The field reports them to the surrounding <form> automatically (via ElementInternals), so submission is blocked while invalid — no extra wiring.

The element proxies native validity: <a-input> exposes checkValidity() and validationMessage (the browser’s localized message).

Pass validationMessage to hint and set status="critical" — the field goes red, shows the warning glyph, and reports invalid to the form. Mark the form noValidate so the browser’s default bubbles step aside for Anta’s styling. Try submitting empty, or with a bad email / out-of-range age.

Enter doesn’t submit the form. The real <input> lives in shadow DOM, so it isn’t a light-DOM member of the <form>, and pressing Enter won’t trigger native implicit submission — a deliberate choice, since auto-submitting a half-filled multi-field form is usually more annoyance than help. To submit on Enter, handle it yourself (onKeyDown → form.requestSubmit()), or reach for Anta’s upcoming <Form> component. Everything else — value submission under name, checkValidity(), formReset — works natively.

The label, field, and hint aren’t hardcoded to “stacked.” The element lays them out as a single-column grid (hence the default label-above / hint-below rhythm) and exposes each region as a shadow part (label, field, hint). Rearrange them from your own CSS: re-template the grid on a-input, then place the parts. No layout prop to learn — your rule wins because the element’s defaults live in @layer anta.

And because each <a-input> is itself a normal grid/flex item, wrapping is just sizing: give the inputs a min-width (and maybe max-width) inside any wrapping container and they reflow by available width — the field’s internal grid is independent of how the fields themselves flow.

The .label-side / .aligned-form / .wrap-fields classes below are only to scope each demo — swap your own selector.