@antadesign/anta
    Preparing search index...

    Interface AInputAttributesUnreviewed

    Attributes for the <a-input> custom element — a form-associated text field whose real <input> / <textarea> lives in shadow DOM. For the typed JSX wrapper use Input from @antadesign/anta.

    Slots (light-DOM children): label, leading, trailing, hint. The element exposes ::part(field | input | label | leading | trailing | hint) for styling, and :state(filled) / :state(invalid) as CSS hooks.

    interface AInputAttributes {
        onClick?: (e: any) => void;
        onDoubleClick?: (e: any) => void;
        onAuxClick?: (e: any) => void;
        onContextMenu?: (e: any) => void;
        onMouseDown?: (e: any) => void;
        onMouseUp?: (e: any) => void;
        onMouseEnter?: (e: any) => void;
        onMouseLeave?: (e: any) => void;
        onMouseMove?: (e: any) => void;
        onMouseOver?: (e: any) => void;
        onMouseOut?: (e: any) => void;
        onPointerDown?: (e: any) => void;
        onPointerUp?: (e: any) => void;
        onPointerMove?: (e: any) => void;
        onPointerEnter?: (e: any) => void;
        onPointerLeave?: (e: any) => void;
        onPointerOver?: (e: any) => void;
        onPointerOut?: (e: any) => void;
        onPointerCancel?: (e: any) => void;
        onGotPointerCapture?: (e: any) => void;
        onLostPointerCapture?: (e: any) => void;
        onTouchStart?: (e: any) => void;
        onTouchEnd?: (e: any) => void;
        onTouchMove?: (e: any) => void;
        onTouchCancel?: (e: any) => void;
        onKeyDown?: (e: any) => void;
        onKeyUp?: (e: any) => void;
        onFocus?: (e: any) => void;
        onBlur?: (e: any) => void;
        onChange?: (e: any) => void;
        onInput?: (e: any) => void;
        onBeforeInput?: (e: any) => void;
        onInvalid?: (e: any) => void;
        onReset?: (e: any) => void;
        onSubmit?: (e: any) => void;
        onSelect?: (e: any) => void;
        onCopy?: (e: any) => void;
        onCut?: (e: any) => void;
        onPaste?: (e: any) => void;
        onCompositionStart?: (e: any) => void;
        onCompositionUpdate?: (e: any) => void;
        onCompositionEnd?: (e: any) => void;
        onDrag?: (e: any) => void;
        onDragStart?: (e: any) => void;
        onDragEnd?: (e: any) => void;
        onDragEnter?: (e: any) => void;
        onDragLeave?: (e: any) => void;
        onDragOver?: (e: any) => void;
        onDrop?: (e: any) => void;
        onScroll?: (e: any) => void;
        onWheel?: (e: any) => void;
        onAnimationStart?: (e: any) => void;
        onAnimationEnd?: (e: any) => void;
        onAnimationIteration?: (e: any) => void;
        onTransitionEnd?: (e: any) => void;
        onLoad?: (e: any) => void;
        onError?: (e: any) => void;
        onAbort?: (e: any) => void;
        onToggle?: (e: any) => void;
        onBeforeToggle?: (e: any) => void;
        onCanPlay?: (e: any) => void;
        onCanPlayThrough?: (e: any) => void;
        onDurationChange?: (e: any) => void;
        onEmptied?: (e: any) => void;
        onEnded?: (e: any) => void;
        onLoadedData?: (e: any) => void;
        onLoadedMetadata?: (e: any) => void;
        onLoadStart?: (e: any) => void;
        onPause?: (e: any) => void;
        onPlay?: (e: any) => void;
        onPlaying?: (e: any) => void;
        onProgress?: (e: any) => void;
        onRateChange?: (e: any) => void;
        onSeeked?: (e: any) => void;
        onSeeking?: (e: any) => void;
        onStalled?: (e: any) => void;
        onSuspend?: (e: any) => void;
        onTimeUpdate?: (e: any) => void;
        onVolumeChange?: (e: any) => void;
        onWaiting?: (e: any) => void;
        key?: string | number | null;
        id?: string;
        class?: string;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        slot?: string;
        tabIndex?: number;
        role?: string;
        value?: string;
        defaultvalue?: string;
        multiline?: boolean | "";
        rows?: number | string;
        maxrows?: number | string;
        status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
        tone?: string;
        priority?: "primary" | "secondary" | "tertiary";
        disabled?: boolean | "";
        readonly?: boolean | "";
        button?: boolean | "";
        required?: boolean | "";
        "dim-actions"?: boolean | "";
        round?: boolean | number | string;
        size?: "small" | "medium" | "large";
        type?: "text" | "email" | "password" | "tel" | "url" | "number";
        name?: string;
        placeholder?: string;
        autofocus?: boolean | "";
        truncate?: boolean | "";
        autocomplete?: string;
        inputmode?:
            | "none"
            | "text"
            | "decimal"
            | "numeric"
            | "tel"
            | "search"
            | "email"
            | "url";
        maxlength?: number
        | string;
        minlength?: number | string;
        pattern?: string;
        min?: number | string;
        max?: number | string;
        step?: number | string;
        spellcheck?: "true" | "false" | boolean;
        oninput?: (e: any) => void;
        onchange?: (e: any) => void;
        onclearclick?: (e: any) => void;
        onclearinput?: (e: any) => void;
        "aria-invalid"?: "true" | "false" | boolean;
        "aria-label"?: string;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `aria-${string}`]: unknown

      Standard ARIA attributes describe the native input/textarea in the shadow tree and are delegated there when the element upgrades.

    Index
    onClick? onDoubleClick? onAuxClick? onContextMenu? onMouseDown? onMouseUp? onMouseEnter? onMouseLeave? onMouseMove? onMouseOver? onMouseOut? onPointerDown? onPointerUp? onPointerMove? onPointerEnter? onPointerLeave? onPointerOver? onPointerOut? onPointerCancel? onGotPointerCapture? onLostPointerCapture? onTouchStart? onTouchEnd? onTouchMove? onTouchCancel? onKeyDown? onKeyUp? onFocus? onBlur? onChange? onInput? onBeforeInput? onInvalid? onReset? onSubmit? onSelect? onCopy? onCut? onPaste? onCompositionStart? onCompositionUpdate? onCompositionEnd? onDrag? onDragStart? onDragEnd? onDragEnter? onDragLeave? onDragOver? onDrop? onScroll? onWheel? onAnimationStart? onAnimationEnd? onAnimationIteration? onTransitionEnd? onLoad? onError? onAbort? onToggle? onBeforeToggle? onCanPlay? onCanPlayThrough? onDurationChange? onEmptied? onEnded? onLoadedData? onLoadedMetadata? onLoadStart? onPause? onPlay? onPlaying? onProgress? onRateChange? onSeeked? onSeeking? onStalled? onSuspend? onTimeUpdate? onVolumeChange? onWaiting? key? id? class? className? style? children? slot? tabIndex? role? value? defaultvalue? multiline? rows? maxrows? status? tone? priority? disabled? readonly? button? required? dim-actions? round? size? type? name? placeholder? autofocus? truncate? autocomplete? inputmode? maxlength? minlength? pattern? min? max? step? spellcheck? oninput? onchange? onclearclick? onclearinput? aria-invalid? aria-label?
    onClick?: (e: any) => void
    onDoubleClick?: (e: any) => void
    onAuxClick?: (e: any) => void
    onContextMenu?: (e: any) => void
    onMouseDown?: (e: any) => void
    onMouseUp?: (e: any) => void
    onMouseEnter?: (e: any) => void
    onMouseLeave?: (e: any) => void
    onMouseMove?: (e: any) => void
    onMouseOver?: (e: any) => void
    onMouseOut?: (e: any) => void
    onPointerDown?: (e: any) => void
    onPointerUp?: (e: any) => void
    onPointerMove?: (e: any) => void
    onPointerEnter?: (e: any) => void
    onPointerLeave?: (e: any) => void
    onPointerOver?: (e: any) => void
    onPointerOut?: (e: any) => void
    onPointerCancel?: (e: any) => void
    onGotPointerCapture?: (e: any) => void
    onLostPointerCapture?: (e: any) => void
    onTouchStart?: (e: any) => void
    onTouchEnd?: (e: any) => void
    onTouchMove?: (e: any) => void
    onTouchCancel?: (e: any) => void
    onKeyDown?: (e: any) => void
    onKeyUp?: (e: any) => void
    onFocus?: (e: any) => void
    onBlur?: (e: any) => void
    onChange?: (e: any) => void
    onInput?: (e: any) => void
    onBeforeInput?: (e: any) => void
    onInvalid?: (e: any) => void
    onReset?: (e: any) => void
    onSubmit?: (e: any) => void
    onSelect?: (e: any) => void
    onCopy?: (e: any) => void
    onCut?: (e: any) => void
    onPaste?: (e: any) => void
    onCompositionStart?: (e: any) => void
    onCompositionUpdate?: (e: any) => void
    onCompositionEnd?: (e: any) => void
    onDrag?: (e: any) => void
    onDragStart?: (e: any) => void
    onDragEnd?: (e: any) => void
    onDragEnter?: (e: any) => void
    onDragLeave?: (e: any) => void
    onDragOver?: (e: any) => void
    onDrop?: (e: any) => void
    onScroll?: (e: any) => void
    onWheel?: (e: any) => void
    onAnimationStart?: (e: any) => void
    onAnimationEnd?: (e: any) => void
    onAnimationIteration?: (e: any) => void
    onTransitionEnd?: (e: any) => void
    onLoad?: (e: any) => void
    onError?: (e: any) => void
    onAbort?: (e: any) => void
    onToggle?: (e: any) => void
    onBeforeToggle?: (e: any) => void
    onCanPlay?: (e: any) => void
    onCanPlayThrough?: (e: any) => void
    onDurationChange?: (e: any) => void
    onEmptied?: (e: any) => void
    onEnded?: (e: any) => void
    onLoadedData?: (e: any) => void
    onLoadedMetadata?: (e: any) => void
    onLoadStart?: (e: any) => void
    onPause?: (e: any) => void
    onPlay?: (e: any) => void
    onPlaying?: (e: any) => void
    onProgress?: (e: any) => void
    onRateChange?: (e: any) => void
    onSeeked?: (e: any) => void
    onSeeking?: (e: any) => void
    onStalled?: (e: any) => void
    onSuspend?: (e: any) => void
    onTimeUpdate?: (e: any) => void
    onVolumeChange?: (e: any) => void
    onWaiting?: (e: any) => void
    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list.

    id?: string

    HTML id attribute.

    class?: string

    HTML class attribute (standard DOM).

    className?: string

    React/Preact-style class name. Alias for class.

    style?: CSSProperties

    Inline styles applied to the element.

    children?: ReactNode
    slot?: string

    Assigns the element to a named <slot> (e.g. slot="title").

    tabIndex?: number

    Tab order. Set to 0 to make the element keyboard-focusable.

    role?: string

    ARIA role override.

    value?: string

    Controlled value (string). Reflected to the shadow control only when it differs, so the caret survives re-renders.

    defaultvalue?: string

    Initial value for the uncontrolled case; read once on connect.

    multiline?: boolean | ""

    Render a <textarea> rather than <input>. Presence-based.

    rows?: number | string

    Fixed visible row count for a <textarea> (implies multiline).

    maxrows?: number | string

    Cap autogrow height (rows) for a multiline field with no rows.

    status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical"

    Validation/feedback tone — colors the border + message and (via the wrapper) the glyph. Only critical carries validity weight (aria-invalid

    • :state(invalid)); the others are advisory. Omit for the neutral field.
    tone?: string

    Custom accent color (any literal CSS color) — tints the border when shown via an oklch derivation. status overrides it for validation.

    priority?: "primary" | "secondary" | "tertiary"

    Field emphasis. Secondary removes the fill; tertiary also makes the resting border transparent. Status borders remain visible.

    disabled?: boolean | ""

    Disabled state. Presence-based.

    readonly?: boolean | ""

    Read-only state. Presence-based.

    button?: boolean | ""

    Render a native button inside the field surface. Presence-based.

    required?: boolean | ""

    Required — drives native validity. Presence-based.

    "dim-actions"?: boolean | ""

    Dim the leading/trailing adornments at rest (0.6); they brighten to full when the field is hovered or focused. Presence-based.

    round?: boolean | number | string

    Fully-round field (border-radius: 999px), or a custom radius via a length value (round="10px"). Presence-based for the boolean form.

    size?: "small" | "medium" | "large"

    Size variant. small=24px, medium (default)=28px, large=32px.

    type?: "text" | "email" | "password" | "tel" | "url" | "number"

    Single-line input type (ignored when multiline). search is intentionally unavailable — it triggers browser-injected clear/search affordances.

    name?: string

    Form field name — submitted via ElementInternals.

    placeholder?: string

    Placeholder shown when empty.

    autofocus?: boolean | ""

    Focus this field when its containing a-dialog opens. Presence-based.

    truncate?: boolean | ""

    Ellipsize an overflowing single-line value. Presence-based.

    autocomplete?: string
    inputmode?:
        | "none"
        | "text"
        | "decimal"
        | "numeric"
        | "tel"
        | "search"
        | "email"
        | "url"
    maxlength?: number | string
    minlength?: number | string
    pattern?: string
    min?: number | string
    max?: number | string
    step?: number | string
    spellcheck?: "true" | "false" | boolean
    oninput?: (e: any) => void

    Fires on every keystroke (input is composed — it reaches the host).

    onchange?: (e: any) => void

    Fires on commit; the element re-dispatches the control's change on the host (native change isn't composed).

    onclearclick?: (e: any) => void

    Fires when the built-in clear button is clicked, before clearing (cancelable, bubbling clearclick event — preventDefault keeps the value). All-lowercase so it binds in React and Preact.

    onclearinput?: (e: any) => void

    Fires after the field has been cleared (bubbling clearinput event). All-lowercase so it binds in React and Preact.

    "aria-invalid"?: "true" | "false" | boolean
    "aria-label"?: string

    Settings
    Member Visibility

    On This Page
    Properties
    onClickonDoubleClickonAuxClickonContextMenuonMouseDownonMouseUponMouseEnteronMouseLeaveonMouseMoveonMouseOveronMouseOutonPointerDownonPointerUponPointerMoveonPointerEnteronPointerLeaveonPointerOveronPointerOutonPointerCancelonGotPointerCaptureonLostPointerCaptureonTouchStartonTouchEndonTouchMoveonTouchCancelonKeyDownonKeyUponFocusonBluronChangeonInputonBeforeInputonInvalidonResetonSubmitonSelectonCopyonCutonPasteonCompositionStartonCompositionUpdateonCompositionEndonDragonDragStartonDragEndonDragEnteronDragLeaveonDragOveronDroponScrollonWheelonAnimationStartonAnimationEndonAnimationIterationonTransitionEndonLoadonErroronAbortonToggleonBeforeToggleonCanPlayonCanPlayThroughonDurationChangeonEmptiedonEndedonLoadedDataonLoadedMetadataonLoadStartonPauseonPlayonPlayingonProgressonRateChangeonSeekedonSeekingonStalledonSuspendonTimeUpdateonVolumeChangeonWaitingkeyidclassclassNamestylechildrenslottabIndexrolevaluedefaultvaluemultilinerowsmaxrowsstatustoneprioritydisabledreadonlybuttonrequireddim-actionsroundsizetypenameplaceholderautofocustruncateautocompleteinputmodemaxlengthminlengthpatternminmaxstepspellcheckoninputonchangeonclearclickonclearinputaria-invalidaria-label