@antadesign/anta
    Preparing search index...

    Interface InputPropsUnreviewed

    Common props for JSX component wrappers.

    interface InputProps {
        children?: ReactNode;
        label?: ReactNode;
        hint?: ReactNode;
        status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
        statusIcon?: string & {} | false | (keyof IconShapes);
        tone?: string;
        priority?: "primary" | "secondary" | "tertiary";
        size?: "small" | "medium" | "large";
        value?: string;
        defaultValue?: string;
        multiline?: boolean;
        rows?: number;
        maxRows?: number;
        clearable?: boolean;
        leading?: ReactNode;
        trailing?: ReactNode;
        type?: "text" | "search" | "email" | "password" | "tel" | "url" | "number";
        autoComplete?:
            | "off"
            | "on"
            | "name"
            | "username"
            | "email"
            | "current-password"
            | "new-password"
            | "one-time-code"
            | "tel"
            | "url"
            | string & {};
        inputMode?: | "none"
        | "text"
        | "decimal"
        | "numeric"
        | "tel"
        | "search"
        | "email"
        | "url";
        autoFocus?: boolean;
        name?: string;
        placeholder?: string;
        truncate?: boolean;
        disabled?: boolean;
        readOnly?: boolean;
        button?: boolean;
        required?: boolean;
        dimActions?: boolean;
        round?: boolean
        | number
        | string;
        spellCheck?: boolean;
        maxLength?: number;
        minLength?: number;
        pattern?: string;
        min?: number | string;
        max?: number | string;
        step?: number | string;
        onInput?: (e: any) => void;
        onChange?: (e: any) => void;
        onValueChange?: (event: any, attrs: InputChangeAttrs) => void;
        onClearClick?: (e: CustomEvent) => void;
        onClearInput?: (e: CustomEvent) => void;
        onFocus?: (e: any) => void;
        onBlur?: (e: any) => void;
        role?: string;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        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;
        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: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

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

      Any data-* attribute is forwarded to the rendered element.

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

      Any aria-* attribute is forwarded to the rendered element.

    Index
    children? label? hint? status? statusIcon? tone? priority? size? value? defaultValue? multiline? rows? maxRows? clearable? leading? trailing? type? autoComplete? inputMode? autoFocus? name? placeholder? truncate? disabled? readOnly? button? required? dimActions? round? spellCheck? maxLength? minLength? pattern? min? max? step? onInput? onChange? onValueChange? onClearClick? onClearInput? onFocus? onBlur? role? className? style? id? title? slot? tabIndex? key? 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? 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?
    children?: ReactNode

    Extra content between the field and hint. A Tooltip child anchors to the field. Use leading and trailing for content inside the field.

    label?: ReactNode

    Explain what to enter. Accepts text or JSX and also names the field for screen readers.

    hint?: ReactNode

    Persistent help or feedback below the field. status colors the message and adds a status icon.

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

    Feedback for the field and hint. Use critical for an error that must be fixed before submission. Other statuses provide feedback without adding a validation error. Required fields and other validation rules still apply.

    statusIcon?: string & {} | false | (keyof IconShapes)

    Icon before the hint. The defaults are warning-diamond for critical, warning-triangle for warning, circle-check for success, info for info, and circle-small-solid for brand. Pass a shape to replace it or false to hide it. Neutral has no default icon.

    tone?: string

    Custom CSS border color. A non-neutral status takes precedence. The focus ring uses the global --focus-ring.

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

    Field 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.

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

    Adjust the field, text, icons, and action buttons together to suit the surrounding interface.

    medium
    value?: string

    Controlled value. Update it with onInput or onValueChange for live editing. Form reset and restoration preserve controlled text; release retains the current text.

    defaultValue?: string

    Initial value for an uncontrolled field, restored on form reset.

    multiline?: boolean

    Allow longer text and grow the field as someone types. Use maxRows to limit growth or rows to keep a fixed height.

    rows?: number

    Fixed visible row count. Also enables multiline.

    maxRows?: number

    Maximum row count for autogrow when rows is unset. Omit for unlimited growth.

    clearable?: boolean

    Show a clear button before trailing content when an editable field has a value.

    leading?: ReactNode

    Content at the start of the field, such as an icon or text.

    trailing?: ReactNode

    Content at the end of the field, after the clear button. Anta buttons fit the field height and keep their padding. Icon-only Buttons are square; text buttons keep their natural width. Pass buttons directly or in a fragment for compact spacing. Other wrapping elements keep the text inset. Override either inset with the --input-trailing-inset CSS property.

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

    Choose the kind of information to enter. Ignored for multiline fields. search adds a search icon and clear button. Replace the icon with leading or hide the button with clearable={false}.

    text
    autoComplete?:
        | "off"
        | "on"
        | "name"
        | "username"
        | "email"
        | "current-password"
        | "new-password"
        | "one-time-code"
        | "tel"
        | "url"
        | string & {}

    Native autocomplete token describing the field purpose. Overrides the token derived from the email, tel, or url type. Set an explicit token for other purposes, such as username, current-password, or one-time-code.

    inputMode?:
        | "none"
        | "text"
        | "decimal"
        | "numeric"
        | "tel"
        | "search"
        | "email"
        | "url"

    Virtual keyboard hint. Overrides the value derived from type without changing validation.

    autoFocus?: boolean

    Focus this field when its containing Dialog opens.

    name?: string

    Form field name for submission, named form lookup, and attribute selectors.

    placeholder?: string

    Placeholder shown when empty.

    truncate?: boolean

    Ellipsize an overflowing single-line value. Read-only inputs already do this; pass false when an editable field should show the full value.

    true
    disabled?: boolean

    Disable the field.

    readOnly?: boolean

    Make the field read-only.

    button?: boolean

    Render 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.

    required?: boolean

    Mark the field required (drives native validity).

    dimActions?: boolean

    Keep leading, trailing, and clear content subtle until someone hovers over or focuses the field.

    round?: boolean | number | string

    Give the field fully rounded corners. Pass a number in pixels or a CSS length for a custom radius. The clear button stays circular.

    spellCheck?: boolean

    Toggle native spell-checking.

    maxLength?: number

    Maximum text length for native types that support it.

    minLength?: number

    Minimum text length for native types that support it.

    pattern?: string

    Validation pattern for supported single-line types. Checks validity without preventing typing.

    min?: number | string

    Minimum value for type="number".

    max?: number | string

    Maximum value for type="number".

    step?: number | string

    Allowed increment for type="number".

    onInput?: (e: any) => void

    Fires when editing changes the value or the field is cleared. Read e.target.value.

    onChange?: (e: any) => void

    Fires on native commit, such as blur or Enter, and on clear. Use onInput or onValueChange for live edits. Read e.target.value.

    onValueChange?: (event: any, attrs: InputChangeAttrs) => void

    Receive the current text, field name, and validation result while editing and when an edit is committed, including clear. Can run more than once for the same value. Use event.type to distinguish the events.

    onClearClick?: (e: CustomEvent) => void

    Fires before the built-in clear action. Call e.preventDefault() synchronously to keep the value and cancel onClearInput. Corresponds to the cancelable, bubbling clearclick event.

    onClearInput?: (e: CustomEvent) => void

    Fires after clearing, following onInput and onChange. Does not fire when clearing is canceled. Corresponds to the bubbling clearinput event.

    onFocus?: (e: any) => void

    Fires when the field gains focus.

    onBlur?: (e: any) => void

    Fires when the field loses focus.

    role?: string

    ARIA role for the native control, such as combobox for an InputAutocomplete trigger. The element delegates this and standard aria-* props to its native shadow control.

    className?: string

    Adds CSS classes to the root element and preserves its existing classes.

    style?: CSSProperties

    Inline CSS styles on the root element.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute, shown as a browser tooltip on hover.

    slot?: string

    Named slot in a parent web component, such as slot="header" in a <Dialog>.

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    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
    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

    Settings
    Member Visibility

    On This Page
    Properties
    childrenlabelhintstatusstatusIcontoneprioritysizevaluedefaultValuemultilinerowsmaxRowsclearableleadingtrailingtypeautoCompleteinputModeautoFocusnameplaceholdertruncatedisabledreadOnlybuttonrequireddimActionsroundspellCheckmaxLengthminLengthpatternminmaxsteponInputonChangeonValueChangeonClearClickonClearInputonFocusonBlurroleclassNamestyleidtitleslottabIndexkeyonClickonDoubleClickonAuxClickonContextMenuonMouseDownonMouseUponMouseEnteronMouseLeaveonMouseMoveonMouseOveronMouseOutonPointerDownonPointerUponPointerMoveonPointerEnteronPointerLeaveonPointerOveronPointerOutonPointerCancelonGotPointerCaptureonLostPointerCaptureonTouchStartonTouchEndonTouchMoveonTouchCancelonKeyDownonKeyUponBeforeInputonInvalidonResetonSubmitonSelectonCopyonCutonPasteonCompositionStartonCompositionUpdateonCompositionEndonDragonDragStartonDragEndonDragEnteronDragLeaveonDragOveronDroponScrollonWheelonAnimationStartonAnimationEndonAnimationIterationonTransitionEndonLoadonErroronAbortonToggleonBeforeToggleonCanPlayonCanPlayThroughonDurationChangeonEmptiedonEndedonLoadedDataonLoadedMetadataonLoadStartonPauseonPlayonPlayingonProgressonRateChangeonSeekedonSeekingonStalledonSuspendonTimeUpdateonVolumeChangeonWaiting