UnreviewedAny data-* attribute is forwarded to the rendered element.
Any aria-* attribute is forwarded to the rendered element.
Optional UnreviewedchildrenExtra content rendered directly under the field, above the hint/error (it
pushes the message down). A no-box child like an Anta <Tooltip> takes no
space and anchors to the field — consistent with how tooltips attach
to any other element. Use the named leading / trailing props for
in-field content.
Optional UnreviewedlabelField label, shown above the control. A string is rendered with the
label type scale; pass a node for full control. Associated with the
control as its accessible name (the element mirrors the label text to
aria-label, since <label for> can't cross the shadow boundary).
Optional UnreviewedhintMessage below the field. Neutral helper text by default; status recolors
it and prefixes the matching glyph.
Optional UnreviewedstatusValidation / feedback tone — colors the border + hint and prefixes a
glyph. Only critical marks the field invalid (aria-invalid, blocks form
submission, :state(invalid)); success / warning / info / brand
are advisory and stay valid. Omit (or neutral) for a plain field.
Optional UnreviewedstatusGlyph shown before the hint when status is set. Each status has a
default (critical → warning-diamond, warning → warning-triangle,
success → circle-check, info → info, brand → circle-small-solid); pass a
shape to override, or false to drop it. neutral has no default glyph.
Optional UnreviewedtoneCustom accent color — any literal CSS color tints the border when shown
(focus ring stays the global --focus-ring). For consistency with the
other controls' custom-tone knob; a status still overrides for validation.
Optional UnreviewedpriorityField emphasis. primary has a fill and border, secondary keeps the
border without a fill, and tertiary makes the border transparent until
hover or focus.
Status borders remain visible at rest.
Optional UnreviewedsizeSize variant. small=24px, medium=28px, large=32px tall; the type scale and icon track the size (small 13/16 + 14px icon · medium 15/20 + 16px · large 17/22 + 18px).
Optional UnreviewedvalueControlled value. Pair with onChange / onInput.
Optional UnrevieweddefaultInitial value for the uncontrolled case.
Optional UnreviewedmultilineRender a <textarea> instead of an <input>. Without rows it grows
with its content from one line (capped by maxRows if set). Autogrow uses
CSS field-sizing where supported (Chrome/Edge, Safari ≥ 26.2) and falls
back to a built-in JS resize elsewhere (Firefox, older Safari), so it grows
in every browser.
Optional UnreviewedrowsFixed visible row count — a constant-height <textarea> (implies
multiline).
Optional UnreviewedmaxCap the autogrow height (in rows) of a multiline field with no rows.
Omit for unbounded growth.
Optional UnreviewedclearableShow a clear button as the first trailing item once the field has a value.
Optional UnreviewedleadingContent pinned to the start of the field (e.g. an icon).
Optional UnreviewedtrailingContent pinned to the end of the field (e.g. icons, buttons), after the
clear button when clearable.
Optional UnreviewedtypeSingle-line input type. Ignored when multiline. search is a
wrapper-only shorthand: it defaults a leading search icon and a clear
button (both overridable — pass your own leading, or clearable={false})
and sets inputmode="search", but the DOM input stays type="text". The
native search type never reaches the element, so the browser's own
clear/search affordances never appear — Anta owns that chrome.
Optional UnreviewedautoNative autocomplete token. Overrides the value derived from type
(email / tel / url) — set it for the cases type can't express, e.g.
username, current-password, new-password, one-time-code, or off.
Optional UnreviewedinputVirtual-keyboard hint. Overrides the value derived from type.
Optional UnreviewedautoFocus this field when its containing Dialog opens.
Optional UnreviewednameForm field name — submitted with the form via ElementInternals.
Optional UnreviewedplaceholderPlaceholder shown when empty.
Optional UnreviewedtruncateEllipsize an overflowing single-line value. Read-only inputs already do
this; pass false when an editable field should show the full value.
Optional UnrevieweddisabledDisable the field.
Optional UnreviewedreadMake the field read-only.
Optional UnreviewedbuttonRender the field surface with a native button as its focus target. This is available for Input-styled popup triggers; the value becomes the button text and the placeholder is shown while it is empty.
Optional UnreviewedrequiredMark the field required (drives native validity).
Optional UnrevieweddimDim the leading / trailing adornments at rest; they brighten to full
when the field is hovered or focused (a quiet-until-engaged affordance for
trailing actions).
Optional UnreviewedroundFully-round the field (border-radius: 999px). Pass a number (px) or a CSS
length string for a custom radius. The clearable × button always rounds to
a circle to match (it isn't sized by a custom field value).
Optional UnreviewedspellToggle native spell-checking.
Optional UnreviewedmaxMax input length.
Optional UnreviewedminMin input length.
Optional UnreviewedpatternValidation pattern (single-line).
Optional UnreviewedminMin / max / step — for type="number".
OptionalmaxOptionalstepOptional UnreviewedonFires on every keystroke. Read e.target.value.
Optional UnreviewedonFires on commit (blur / Enter) — the platform change semantics, not
React's per-keystroke onChange. This is a web component, so onChange keeps
the native meaning; reach for onInput (every keystroke) or onValueChange
(both) for live updates. Read e.target.value.
Optional UnreviewedonUnified value-change handler — the easy path for state. Fires on input
and change (and on clear), with the native event plus a convenience
attrs snapshot (value, name, empty, valid, validationMessage) so
you can do setForm(s => ({ ...s, [attrs.name]: attrs.value })) without
digging into the event. Use event.type to tell a live edit (input) from
a commit (change); read id / type / className off event.target.
Optional UnreviewedonFires when the built-in clear button (clearable) is clicked, before
the field is cleared. Call e.preventDefault() to keep the current value
— the clear is cancelled and onClearInput won't fire. Backed by the
element's cancelable, bubbling clearclick event.
Optional UnreviewedonFires after the built-in clear button (clearable) has cleared the field
— so onInput / onChange fire too — making this useful for reacting
specifically to a clear. Doesn't fire if onClearClick cancelled the
clear. Backed by the element's bubbling clearinput event.
Optional UnreviewedonFires when the field gains focus.
Optional UnreviewedonFires when the field loses focus.
Optional UnreviewedroleARIA role for the field — e.g. combobox when the input drives a
suggestion listbox (see InputAutocomplete). The custom element
delegates it, together with standard aria-* props, to the focused native
shadow control. Left unset by default.
Optional UnreviewedclassCSS class on the component's root element (merged with the component's own
classes). Use it directly for layout and positioning — grid/flex placement,
margins, alignment — rather than wrapping the component in a <div>/<span>.
Optional UnreviewedstyleInline styles on the component's root element. Set layout/positioning here
(or via className) directly on the component instead of adding a wrapper.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute — native browser tooltip on hover.
Optional UnreviewedslotAssigns the element to a named <slot> of a parent web component (e.g.
slot="header" inside a <Card>, slot="footer" inside a <Dialog>).
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
OptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalon
Common props for JSX component wrappers.