Omit
<InputHTMLAttributes
<HTMLInputElement
>, "size"
| "prefix"
| "disabled"
| "inputMode"
>
VariantProps
<typeof inputVariants
>
↳ InputProps
Optional
about: string
Optional
accept: string
Optional
accessKey: string
Optional
alt: string
Optional
aria-activedescendant: string
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
Optional
aria-atomic: Booleanish
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
Optional
aria-autocomplete: "none"
| "both"
| "inline"
| "list"
Indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for an input and specifies how predictions would be
presented if they are made.
Optional
aria-braillelabel: string
Defines a string value that labels the current element, which is intended to be converted into Braille.
See
aria-label.
Optional
aria-brailleroledescription: string
Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
See
aria-roledescription.
Optional
aria-busy: Booleanish
Optional
aria-checked: boolean
| "mixed"
| "false"
| "true"
Indicates the current “checked” state of checkboxes, radio buttons, and other widgets.
See
Optional
aria-colcount: number
Defines the total number of columns in a table, grid, or treegrid.
See
aria-colindex.
Optional
aria-colindex: number
Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.
See
Optional
aria-colindextext: string
Defines a human readable text alternative of aria-colindex.
See
aria-rowindextext.
Optional
aria-colspan: number
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
See
Optional
aria-controls: string
Identifies the element (or elements) whose contents or presence are controlled by the current element.
See
aria-owns.
Optional
aria-current: boolean
| "time"
| "page"
| "date"
| "false"
| "true"
| "step"
| "location"
Indicates the element that represents the current item within a container or set of related elements.
Optional
aria-describedby: string
Identifies the element (or elements) that describes the object.
See
aria-labelledby
Optional
aria-description: string
Defines a string value that describes or annotates the current element.
See
related aria-describedby.
Optional
aria-details: string
Identifies the element that provides a detailed, extended description for the object.
See
aria-describedby.
Optional
aria-disabled: Booleanish
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
See
Optional
aria-dropeffect: "copy"
| "link"
| "none"
| "move"
| "execute"
| "popup"
Indicates what functions can be performed when a dragged object is released on the drop target.
Deprecated
in ARIA 1.1
Optional
aria-errormessage: string
Identifies the element that provides an error message for the object.
See
Optional
aria-expanded: Booleanish
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
Optional
aria-flowto: string
Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion,
allows assistive technology to override the general default of reading in document source order.
Optional
aria-grabbed: Booleanish
Indicates an element’s “grabbed” state in a drag-and-drop operation.
Deprecated
in ARIA 1.1
Optional
aria-haspopup: boolean
| "dialog"
| "menu"
| "listbox"
| "grid"
| "false"
| "true"
| "tree"
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
Optional
aria-hidden: Booleanish
Indicates whether the element is exposed to an accessibility API.
See
aria-disabled.
Optional
aria-invalid: boolean
| "false"
| "true"
| "grammar"
| "spelling"
Indicates the entered value does not conform to the format expected by the application.
See
aria-errormessage.
Optional
aria-keyshortcuts: string
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
Optional
aria-label: string
Defines a string value that labels the current element.
See
aria-labelledby.
Optional
aria-labelledby: string
Identifies the element (or elements) that labels the current element.
See
aria-describedby.
Optional
aria-level: number
Defines the hierarchical level of an element within a structure.
Optional
aria-live: "off"
| "assertive"
| "polite"
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
Optional
aria-modal: Booleanish
Indicates whether an element is modal when displayed.
Optional
aria-multiline: Booleanish
Indicates whether a text box accepts multiple lines of input or only a single line.
Optional
aria-multiselectable: Booleanish
Indicates that the user may select more than one item from the current selectable descendants.
Optional
aria-orientation: "horizontal"
| "vertical"
Indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.
Optional
aria-owns: string
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
See
aria-controls.
Optional
aria-placeholder: string
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format.
Optional
aria-posinset: number
Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
See
aria-setsize.
Optional
aria-pressed: boolean
| "mixed"
| "false"
| "true"
Indicates the current “pressed” state of toggle buttons.
See
Optional
aria-readonly: Booleanish
Indicates that the element is not editable, but is otherwise operable.
See
aria-disabled.
Optional
aria-relevant: "text"
| "all"
| "additions"
| "additions removals"
| "additions text"
| "removals"
| "removals additions"
| "removals text"
| "text additions"
| "text removals"
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
See
aria-atomic.
Optional
aria-required: Booleanish
Indicates that user input is required on the element before a form may be submitted.
Optional
aria-roledescription: string
Defines a human-readable, author-localized description for the role of an element.
Optional
aria-rowcount: number
Defines the total number of rows in a table, grid, or treegrid.
See
aria-rowindex.
Optional
aria-rowindex: number
Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid.
See
Optional
aria-rowindextext: string
Defines a human readable text alternative of aria-rowindex.
See
aria-colindextext.
Optional
aria-rowspan: number
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
See
Optional
aria-selected: Booleanish
Indicates the current “selected” state of various widgets.
See
Optional
aria-setsize: number
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
See
aria-posinset.
Optional
aria-sort: "none"
| "ascending"
| "descending"
| "other"
Indicates if items in a table or grid are sorted in ascending or descending order.
Optional
aria-valuemax: number
Defines the maximum allowed value for a range widget.
Optional
aria-valuemin: number
Defines the minimum allowed value for a range widget.
Optional
aria-valuenow: number
Defines the current value for a range widget.
See
aria-valuetext.
Optional
aria-valuetext: string
Defines the human readable text alternative of aria-valuenow for a range widget.
Optional
autoCapitalize: string
Optional
autoComplete: string
Optional
autoCorrect: string
Optional
autoFocus: boolean
Optional
autoSave: string
Optional
capture: boolean
| "user"
| "environment"
Optional
checked: boolean
Optional
children: ReactNode
Optional
className: string
Optional
color: string
Optional
containerClassName: string
Optional
content: string
Optional
contentEditable: "inherit"
| Booleanish
| "plaintext-only"
Optional
contextMenu: string
Optional
dangerouslySetInnerHTML: Object
Name | Type |
---|---|
__html | string | TrustedHTML |
Optional
datatype: string
Optional
defaultChecked: boolean
Optional
defaultValue: string
| number
| readonly string
[]
Optional
dir: string
Optional
disabled: null
| boolean
Optional
draggable: Booleanish
Optional
enterKeyHint: "send"
| "done"
| "search"
| "next"
| "enter"
| "go"
| "previous"
Optional
error: null
| boolean
Optional
fixClassName: string
Optional
form: string
Optional
formAction: string
Optional
formEncType: string
Optional
formMethod: string
Optional
formNoValidate: boolean
Optional
formTarget: string
Optional
fullWidth: null
| boolean
Optional
height: string
| number
Optional
helpText: string
Optional
hidden: boolean
Optional
id: string
Optional
inlist: any
Optional
inputMode: "amount"
| "numeric"
| "decimal"
Optional
is: string
Specify that a standard HTML element should behave like a defined custom built-in element
See
https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
Optional
itemID: string
Optional
itemProp: string
Optional
itemRef: string
Optional
itemScope: boolean
Optional
itemType: string
Optional
lang: string
Optional
list: string
Optional
loading: boolean
Optional
max: string
| number
Optional
maxLength: number
Optional
min: string
| number
Optional
minLength: number
Optional
multiple: boolean
Optional
name: string
Optional
nonce: string
Optional
onAbort: ReactEventHandler
<HTMLInputElement
>
Optional
onAbortCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onAnimationEnd: AnimationEventHandler
<HTMLInputElement
>
Optional
onAnimationEndCapture: AnimationEventHandler
<HTMLInputElement
>
Optional
onAnimationIteration: AnimationEventHandler
<HTMLInputElement
>
Optional
onAnimationIterationCapture: AnimationEventHandler
<HTMLInputElement
>
Optional
onAnimationStart: AnimationEventHandler
<HTMLInputElement
>
Optional
onAnimationStartCapture: AnimationEventHandler
<HTMLInputElement
>
Optional
onAuxClick: MouseEventHandler
<HTMLInputElement
>
Optional
onAuxClickCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onBeforeInput: FormEventHandler
<HTMLInputElement
>
Optional
onBeforeInputCapture: FormEventHandler
<HTMLInputElement
>
Optional
onBlur: FocusEventHandler
<HTMLInputElement
>
Optional
onBlurCapture: FocusEventHandler
<HTMLInputElement
>
Optional
onCanPlay: ReactEventHandler
<HTMLInputElement
>
Optional
onCanPlayCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onCanPlayThrough: ReactEventHandler
<HTMLInputElement
>
Optional
onCanPlayThroughCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onChange: ChangeEventHandler
<HTMLInputElement
>
Optional
onChangeCapture: FormEventHandler
<HTMLInputElement
>
Optional
onClean: () => void
void
void
Optional
onClick: MouseEventHandler
<HTMLInputElement
>
Optional
onClickCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onCompositionEnd: CompositionEventHandler
<HTMLInputElement
>
Optional
onCompositionEndCapture: CompositionEventHandler
<HTMLInputElement
>
Optional
onCompositionStart: CompositionEventHandler
<HTMLInputElement
>
Optional
onCompositionStartCapture: CompositionEventHandler
<HTMLInputElement
>
Optional
onCompositionUpdate: CompositionEventHandler
<HTMLInputElement
>
Optional
onCompositionUpdateCapture: CompositionEventHandler
<HTMLInputElement
>
Optional
onContextMenu: MouseEventHandler
<HTMLInputElement
>
Optional
onContextMenuCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onCopy: ClipboardEventHandler
<HTMLInputElement
>
Optional
onCopyCapture: ClipboardEventHandler
<HTMLInputElement
>
Optional
onCut: ClipboardEventHandler
<HTMLInputElement
>
Optional
onCutCapture: ClipboardEventHandler
<HTMLInputElement
>
Optional
onDoubleClick: MouseEventHandler
<HTMLInputElement
>
Optional
onDoubleClickCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onDrag: DragEventHandler
<HTMLInputElement
>
Optional
onDragCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDragEnd: DragEventHandler
<HTMLInputElement
>
Optional
onDragEndCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDragEnter: DragEventHandler
<HTMLInputElement
>
Optional
onDragEnterCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDragExit: DragEventHandler
<HTMLInputElement
>
Optional
onDragExitCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDragLeave: DragEventHandler
<HTMLInputElement
>
Optional
onDragLeaveCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDragOver: DragEventHandler
<HTMLInputElement
>
Optional
onDragOverCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDragStart: DragEventHandler
<HTMLInputElement
>
Optional
onDragStartCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDrop: DragEventHandler
<HTMLInputElement
>
Optional
onDropCapture: DragEventHandler
<HTMLInputElement
>
Optional
onDurationChange: ReactEventHandler
<HTMLInputElement
>
Optional
onDurationChangeCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onEmptied: ReactEventHandler
<HTMLInputElement
>
Optional
onEmptiedCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onEncrypted: ReactEventHandler
<HTMLInputElement
>
Optional
onEncryptedCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onEnded: ReactEventHandler
<HTMLInputElement
>
Optional
onEndedCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onError: ReactEventHandler
<HTMLInputElement
>
Optional
onErrorCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onFocus: FocusEventHandler
<HTMLInputElement
>
Optional
onFocusCapture: FocusEventHandler
<HTMLInputElement
>
Optional
onGotPointerCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onGotPointerCaptureCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onInput: FormEventHandler
<HTMLInputElement
>
Optional
onInputCapture: FormEventHandler
<HTMLInputElement
>
Optional
onInvalid: FormEventHandler
<HTMLInputElement
>
Optional
onInvalidCapture: FormEventHandler
<HTMLInputElement
>
Optional
onKeyDown: KeyboardEventHandler
<HTMLInputElement
>
Optional
onKeyDownCapture: KeyboardEventHandler
<HTMLInputElement
>
Optional
onKeyPress: KeyboardEventHandler
<HTMLInputElement
>
Deprecated
Optional
onKeyPressCapture: KeyboardEventHandler
<HTMLInputElement
>
Deprecated
Optional
onKeyUp: KeyboardEventHandler
<HTMLInputElement
>
Optional
onKeyUpCapture: KeyboardEventHandler
<HTMLInputElement
>
Optional
onLoad: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadStart: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadStartCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadedData: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadedDataCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadedMetadata: ReactEventHandler
<HTMLInputElement
>
Optional
onLoadedMetadataCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onLostPointerCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onLostPointerCaptureCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onMouseDown: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseDownCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseEnter: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseLeave: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseMove: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseMoveCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseOut: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseOutCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseOver: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseOverCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseUp: MouseEventHandler
<HTMLInputElement
>
Optional
onMouseUpCapture: MouseEventHandler
<HTMLInputElement
>
Optional
onPaste: ClipboardEventHandler
<HTMLInputElement
>
Optional
onPasteCapture: ClipboardEventHandler
<HTMLInputElement
>
Optional
onPause: ReactEventHandler
<HTMLInputElement
>
Optional
onPauseCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onPlay: ReactEventHandler
<HTMLInputElement
>
Optional
onPlayCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onPlaying: ReactEventHandler
<HTMLInputElement
>
Optional
onPlayingCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onPointerCancel: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerCancelCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerDown: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerDownCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerEnter: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerEnterCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerLeave: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerLeaveCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerMove: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerMoveCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerOut: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerOutCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerOver: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerOverCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerUp: PointerEventHandler
<HTMLInputElement
>
Optional
onPointerUpCapture: PointerEventHandler
<HTMLInputElement
>
Optional
onProgress: ReactEventHandler
<HTMLInputElement
>
Optional
onProgressCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onRateChange: ReactEventHandler
<HTMLInputElement
>
Optional
onRateChangeCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onReset: FormEventHandler
<HTMLInputElement
>
Optional
onResetCapture: FormEventHandler
<HTMLInputElement
>
Optional
onResize: ReactEventHandler
<HTMLInputElement
>
Optional
onResizeCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onScroll: UIEventHandler
<HTMLInputElement
>
Optional
onScrollCapture: UIEventHandler
<HTMLInputElement
>
Optional
onSeeked: ReactEventHandler
<HTMLInputElement
>
Optional
onSeekedCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onSeeking: ReactEventHandler
<HTMLInputElement
>
Optional
onSeekingCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onSelect: ReactEventHandler
<HTMLInputElement
>
Optional
onSelectCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onStalled: ReactEventHandler
<HTMLInputElement
>
Optional
onStalledCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onSubmit: FormEventHandler
<HTMLInputElement
>
Optional
onSubmitCapture: FormEventHandler
<HTMLInputElement
>
Optional
onSuspend: ReactEventHandler
<HTMLInputElement
>
Optional
onSuspendCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onTimeUpdate: ReactEventHandler
<HTMLInputElement
>
Optional
onTimeUpdateCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onTouchCancel: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchCancelCapture: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchEnd: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchEndCapture: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchMove: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchMoveCapture: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchStart: TouchEventHandler
<HTMLInputElement
>
Optional
onTouchStartCapture: TouchEventHandler
<HTMLInputElement
>
Optional
onTransitionEnd: TransitionEventHandler
<HTMLInputElement
>
Optional
onTransitionEndCapture: TransitionEventHandler
<HTMLInputElement
>
Optional
onValueChange: (value
: any
) => void
value
): void
Name | Type |
---|---|
value | any |
void
Optional
onVolumeChange: ReactEventHandler
<HTMLInputElement
>
Optional
onVolumeChangeCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onWaiting: ReactEventHandler
<HTMLInputElement
>
Optional
onWaitingCapture: ReactEventHandler
<HTMLInputElement
>
Optional
onWheel: WheelEventHandler
<HTMLInputElement
>
Optional
onWheelCapture: WheelEventHandler
<HTMLInputElement
>
Optional
pattern: string
Optional
placeholder: string
Optional
prefix: ReactNode
Optional
property: string
Optional
radioGroup: string
Optional
readOnly: boolean
Optional
rel: string
Optional
required: boolean
Optional
resource: string
Optional
results: number
Optional
rev: string
Optional
role: AriaRole
Optional
security: string
Optional
size: null
| "default"
| "small"
Optional
slot: string
Optional
spellCheck: Booleanish
Optional
src: string
Optional
step: string
| number
Optional
style: CSSProperties
Optional
suffix: ReactNode
Optional
suppressContentEditableWarning: boolean
Optional
suppressHydrationWarning: boolean
Optional
tabIndex: number
Optional
thousandSeparator: boolean
Whether to display the thousandth symbol
Optional
title: string
Optional
tooltipClassName: string
Optional
translate: "yes"
| "no"
Optional
type: HTMLInputTypeAttribute
Optional
typeof: string
Optional
unselectable: "on"
| "off"
Optional
value: string
| number
| readonly string
[]
Optional
variant: null
| "filled"
| "outlined"
Optional
vocab: string
Optional
width: string
| number