## Import

```jsx
import { Input } from "@cfa/react-core";
```

## Live Editor

```jsx
<Input aria-label="Example input" defaultValue="Text content" />
```

## Examples

### Basic Input

The default Input component allows users to input text.

```jsx
<Input aria-label="Basic input" placeholder="Enter text here" />
```

### Compact Input

Use the `compact` prop to create a smaller input field, ideal for forms with limited space.

```jsx
<Input compact aria-label="Compact input" defaultValue="Compact input" />
```

### Right-Aligned Input

For numerical inputs, you can use the `alignment` prop to right-align the text.

```jsx
<Input
  alignment="right"
  aria-label="Right-aligned input"
  defaultValue="15000"
/>
```

### Input States

The Input component supports various states to indicate different conditions.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
  <Input aria-label="Disabled input" defaultValue="Cannot be edited" disabled />

  <Input
    aria-label="Read-only input"
    defaultValue="Read-only content"
    readOnly
  />

  <Input aria-label="Success input" defaultValue="Valid input" isSuccess />
</div>
```

### Input Types

Specify different input types using the `type` prop.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
  <Input type="email" aria-label="Email input" placeholder="Enter your email" />

  <Input type="password" aria-label="Password input" defaultValue="abc123" />

  <Input type="search" aria-label="Search input" placeholder="Search..." />
</div>
```

## Props

### Input

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| alignment | `"left" \ | "right"` | `left` | Alignment of the text inside the input |
| compact | `boolean` | `false` | Whether the input is compact or not |
| isSuccess | `boolean` | `false` | Whether the input is in a success state |
| ref | `Ref<HTMLInputElement>` | - | Requires React 19 |
| about | `string` | - | - |
| accept | `string` | - | - |
| accessKey | `string` | - | - |
| alt | `string` | - | - |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| 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. |
| aria-autocomplete | `"list" \ | "none" \ | "inline" \ | "both"` | - | 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&#xA;presented if they are made. |
| aria-braillelabel | `string` | - | Defines a string value that labels the current element, which is intended to be converted into Braille.&#xA;@see aria-label. |
| 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.&#xA;@see aria-roledescription. |
| aria-busy | `Booleanish` | - | - |
| aria-checked | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.&#xA;@see aria-pressed&#xA;@see aria-selected. |
| aria-colcount | `number` | - | Defines the total number of columns in a table, grid, or treegrid.&#xA;@see aria-colindex. |
| 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.&#xA;@see aria-colcount&#xA;@see aria-colspan. |
| aria-colindextext | `string` | - | Defines a human readable text alternative of aria-colindex.&#xA;@see aria-rowindextext. |
| aria-colspan | `number` | - | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-colindex&#xA;@see aria-rowspan. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element.&#xA;@see aria-owns. |
| aria-current | `boolean \ | "step" \ | "true" \ | "false" \ | "date" \ | "time" \ | "page" \ | "location"` | - | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object.&#xA;@see aria-labelledby |
| aria-description | `string` | - | Defines a string value that describes or annotates the current element.&#xA;@see related aria-describedby. |
| aria-details | `string` | - | Identifies the element that provides a detailed, extended description for the object.&#xA;@see aria-describedby. |
| aria-disabled | `Booleanish` | - | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.&#xA;@see aria-hidden&#xA;@see aria-readonly. |
| aria-dropeffect | `"none" \ | "link" \ | "copy" \ | "execute" \ | "move" \ | "popup"` | - | Indicates what functions can be performed when a dragged object is released on the drop target.&#xA;@deprecated in ARIA 1.1 |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object.&#xA;@see aria-invalid&#xA;@see aria-describedby. |
| aria-expanded | `Booleanish` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-flowto | `string` | - | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,&#xA;allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | `Booleanish` | - | Indicates an element's "grabbed" state in a drag-and-drop operation.&#xA;@deprecated in ARIA 1.1 |
| aria-haspopup | `boolean \ | "true" \ | "false" \ | "dialog" \ | "grid" \ | "listbox" \ | "menu" \ | "tree"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API.&#xA;@see aria-disabled. |
| aria-invalid | `boolean \ | "true" \ | "false" \ | "grammar" \ | "spelling"` | - | Indicates the entered value does not conform to the format expected by the application.&#xA;@see aria-errormessage. |
| aria-keyshortcuts | `string` | - | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| aria-label | `string` | - | Defines a string value that labels the current element.&#xA;@see aria-labelledby. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element.&#xA;@see aria-describedby. |
| aria-level | `number` | - | Defines the hierarchical level of an element within a structure. |
| 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. |
| aria-modal | `Booleanish` | - | Indicates whether an element is modal when displayed. |
| aria-multiline | `Booleanish` | - | Indicates whether a text box accepts multiple lines of input or only a single line. |
| aria-multiselectable | `Booleanish` | - | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | `"horizontal" \ | "vertical"` | - | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| aria-owns | `string` | - | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship&#xA;between DOM elements where the DOM hierarchy cannot be used to represent the relationship.&#xA;@see aria-controls. |
| 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.&#xA;A hint could be a sample value or a brief description of the expected format. |
| 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.&#xA;@see aria-setsize. |
| aria-pressed | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "pressed" state of toggle buttons.&#xA;@see aria-checked&#xA;@see aria-selected. |
| aria-readonly | `Booleanish` | - | Indicates that the element is not editable, but is otherwise operable.&#xA;@see aria-disabled. |
| aria-relevant | `"text" \ | "additions" \ | "additions removals" \ | "additions text" \ | "all" \ | "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.&#xA;@see aria-atomic. |
| aria-required | `Booleanish` | - | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | `string` | - | Defines a human-readable, author-localized description for the role of an element. |
| aria-rowcount | `number` | - | Defines the total number of rows in a table, grid, or treegrid.&#xA;@see aria-rowindex. |
| 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.&#xA;@see aria-rowcount&#xA;@see aria-rowspan. |
| aria-rowindextext | `string` | - | Defines a human readable text alternative of aria-rowindex.&#xA;@see aria-colindextext. |
| aria-rowspan | `number` | - | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-rowindex&#xA;@see aria-colspan. |
| aria-selected | `Booleanish` | - | Indicates the current "selected" state of various widgets.&#xA;@see aria-checked&#xA;@see aria-pressed. |
| 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.&#xA;@see aria-posinset. |
| aria-sort | `"none" \ | "ascending" \ | "descending" \ | "other"` | - | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | `number` | - | Defines the maximum allowed value for a range widget. |
| aria-valuemin | `number` | - | Defines the minimum allowed value for a range widget. |
| aria-valuenow | `number` | - | Defines the current value for a range widget.&#xA;@see aria-valuetext. |
| aria-valuetext | `string` | - | Defines the human readable text alternative of aria-valuenow for a range widget. |
| autoCapitalize | `"off" \ | "on" \ | (string & {}) \ | "none" \ | "sentences" \ | "words" \ | "characters"` | - | - |
| autoComplete | `HTMLInputAutoCompleteAttribute` | - | - |
| autoCorrect | `string` | - | - |
| autoFocus | `boolean` | - | - |
| autoSave | `string` | - | - |
| capture | `boolean \ | "user" \ | "environment"` | - | - |
| checked | `boolean` | - | - |
| className | `ClassNameOrFunction<InputRenderProps>` | `'react-aria-Input'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| color | `string` | - | - |
| content | `string` | - | - |
| contentEditable | `Booleanish \ | "inherit" \ | "plaintext-only"` | - | - |
| contextMenu | `string` | - | - |
| dangerouslySetInnerHTML | `{ __html: string \ | TrustedHTML; }` | - | - |
| datatype | `string` | - | - |
| defaultChecked | `boolean` | - | - |
| defaultValue | `string \ | number \ | readonly string[]` | - | - |
| dir | `string` | - | - |
| disabled | `boolean` | - | - |
| draggable | `Booleanish` | - | - |
| enterKeyHint | `"search" \ | "enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "send"` | - | - |
| exportparts | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/exportparts} |
| form | `string` | - | - |
| formAction | `string \ | ((formData: FormData) => void \ | Promise<void>)` | - | - |
| formEncType | `string` | - | - |
| formMethod | `string` | - | - |
| formNoValidate | `boolean` | - | - |
| formTarget | `string` | - | - |
| height | `string \ | number` | - | - |
| hidden | `boolean` | - | - |
| id | `string` | - | - |
| inert | `boolean` | - | @see https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert |
| inlist | `any` | - | - |
| inputMode | `"email" \ | "tel" \ | "search" \ | "text" \ | "url" \ | "none" \ | "numeric" \ | "decimal"` | - | Hints at the type of data that might be entered by the user while editing the element or its contents&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | `string` | - | Specify that a standard HTML element should behave like a defined custom built-in element&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| itemID | `string` | - | - |
| itemProp | `string` | - | - |
| itemRef | `string` | - | - |
| itemScope | `boolean` | - | - |
| itemType | `string` | - | - |
| lang | `string` | - | - |
| list | `string` | - | - |
| max | `string \ | number` | - | - |
| maxLength | `number` | - | - |
| min | `string \ | number` | - | - |
| minLength | `number` | - | - |
| multiple | `boolean` | - | - |
| name | `string` | - | - |
| nonce | `string` | - | - |
| onAbort | `ReactEventHandler<HTMLInputElement>` | - | - |
| onAbortCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLInputElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLInputElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLInputElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLInputElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLInputElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLInputElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLInputElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onBeforeInput | `InputEventHandler<HTMLInputElement>` | - | - |
| onBeforeInputCapture | `FormEventHandler<HTMLInputElement>` | - | - |
| onBeforeToggle | `ToggleEventHandler<HTMLInputElement>` | - | - |
| onBlur | `FocusEventHandler<HTMLInputElement>` | - | - |
| onBlurCapture | `FocusEventHandler<HTMLInputElement>` | - | - |
| onCanPlay | `ReactEventHandler<HTMLInputElement>` | - | - |
| onCanPlayCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onCanPlayThrough | `ReactEventHandler<HTMLInputElement>` | - | - |
| onCanPlayThroughCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onChange | `ChangeEventHandler<HTMLInputElement>` | - | - |
| onChangeCapture | `FormEventHandler<HTMLInputElement>` | - | - |
| onClick | `MouseEventHandler<HTMLInputElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLInputElement>` | - | - |
| onCompositionEndCapture | `CompositionEventHandler<HTMLInputElement>` | - | - |
| onCompositionStart | `CompositionEventHandler<HTMLInputElement>` | - | - |
| onCompositionStartCapture | `CompositionEventHandler<HTMLInputElement>` | - | - |
| onCompositionUpdate | `CompositionEventHandler<HTMLInputElement>` | - | - |
| onCompositionUpdateCapture | `CompositionEventHandler<HTMLInputElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLInputElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLInputElement>` | - | - |
| onCopyCapture | `ClipboardEventHandler<HTMLInputElement>` | - | - |
| onCut | `ClipboardEventHandler<HTMLInputElement>` | - | - |
| onCutCapture | `ClipboardEventHandler<HTMLInputElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLInputElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onDrag | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragEnd | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragEndCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragEnter | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragEnterCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragExit | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragExitCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragLeave | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragLeaveCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragOver | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragOverCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragStart | `DragEventHandler<HTMLInputElement>` | - | - |
| onDragStartCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDrop | `DragEventHandler<HTMLInputElement>` | - | - |
| onDropCapture | `DragEventHandler<HTMLInputElement>` | - | - |
| onDurationChange | `ReactEventHandler<HTMLInputElement>` | - | - |
| onDurationChangeCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onEmptied | `ReactEventHandler<HTMLInputElement>` | - | - |
| onEmptiedCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onEncrypted | `ReactEventHandler<HTMLInputElement>` | - | - |
| onEncryptedCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onEnded | `ReactEventHandler<HTMLInputElement>` | - | - |
| onEndedCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onError | `ReactEventHandler<HTMLInputElement>` | - | - |
| onErrorCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | - |
| onFocusCapture | `FocusEventHandler<HTMLInputElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onInput | `FormEventHandler<HTMLInputElement>` | - | - |
| onInputCapture | `FormEventHandler<HTMLInputElement>` | - | - |
| onInvalid | `FormEventHandler<HTMLInputElement>` | - | - |
| onInvalidCapture | `FormEventHandler<HTMLInputElement>` | - | - |
| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | - |
| onKeyDownCapture | `KeyboardEventHandler<HTMLInputElement>` | - | - |
| onKeyPress | `KeyboardEventHandler<HTMLInputElement>` | - | @deprecated Use \`onKeyUp\` or \`onKeyDown\` instead |
| onKeyPressCapture | `KeyboardEventHandler<HTMLInputElement>` | - | @deprecated Use \`onKeyUpCapture\` or \`onKeyDownCapture\` instead |
| onKeyUp | `KeyboardEventHandler<HTMLInputElement>` | - | - |
| onKeyUpCapture | `KeyboardEventHandler<HTMLInputElement>` | - | - |
| onLoad | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadedData | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadedDataCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadedMetadata | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadedMetadataCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadStart | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLoadStartCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLInputElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLInputElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | - |
| onPasteCapture | `ClipboardEventHandler<HTMLInputElement>` | - | - |
| onPause | `ReactEventHandler<HTMLInputElement>` | - | - |
| onPauseCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onPlay | `ReactEventHandler<HTMLInputElement>` | - | - |
| onPlayCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onPlaying | `ReactEventHandler<HTMLInputElement>` | - | - |
| onPlayingCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLInputElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLInputElement>` | - | - |
| onProgress | `ReactEventHandler<HTMLInputElement>` | - | - |
| onProgressCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onRateChange | `ReactEventHandler<HTMLInputElement>` | - | - |
| onRateChangeCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onReset | `FormEventHandler<HTMLInputElement>` | - | - |
| onResetCapture | `FormEventHandler<HTMLInputElement>` | - | - |
| onScroll | `UIEventHandler<HTMLInputElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLInputElement>` | - | - |
| onScrollEnd | `UIEventHandler<HTMLInputElement>` | - | - |
| onScrollEndCapture | `UIEventHandler<HTMLInputElement>` | - | - |
| onSeeked | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSeekedCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSeeking | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSeekingCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSelectCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onStalled | `ReactEventHandler<HTMLInputElement>` | - | - |
| onStalledCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSubmit | `FormEventHandler<HTMLInputElement>` | - | - |
| onSubmitCapture | `FormEventHandler<HTMLInputElement>` | - | - |
| onSuspend | `ReactEventHandler<HTMLInputElement>` | - | - |
| onSuspendCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onTimeUpdate | `ReactEventHandler<HTMLInputElement>` | - | - |
| onTimeUpdateCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onToggle | `ToggleEventHandler<HTMLInputElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLInputElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLInputElement>` | - | - |
| onVolumeChange | `ReactEventHandler<HTMLInputElement>` | - | - |
| onVolumeChangeCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onWaiting | `ReactEventHandler<HTMLInputElement>` | - | - |
| onWaitingCapture | `ReactEventHandler<HTMLInputElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLInputElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLInputElement>` | - | - |
| part | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/part} |
| pattern | `string` | - | - |
| placeholder | `string` | - | Temporary text that occupies the text input when it is empty.&#xA;See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). |
| popover | `"" \ | "auto" \ | "manual" \ | "hint"` | - | - |
| popoverTarget | `string` | - | - |
| popoverTargetAction | `"toggle" \ | "show" \ | "hide"` | - | - |
| prefix | `string` | - | - |
| property | `string` | - | - |
| radioGroup | `string` | - | - |
| readOnly | `boolean` | - | - |
| rel | `string` | - | - |
| render | `DOMRenderFunction<"input", InputRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| required | `boolean` | - | - |
| resource | `string` | - | - |
| results | `number` | - | - |
| rev | `string` | - | - |
| role | `AriaRole` | - | - |
| security | `string` | - | - |
| size | `number` | - | - |
| slot | `string` | - | - |
| spellCheck | `Booleanish` | - | - |
| src | `string` | - | - |
| step | `string \ | number` | - | - |
| style | `StyleOrFunction<InputRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| suppressContentEditableWarning | `boolean` | - | - |
| suppressHydrationWarning | `boolean` | - | - |
| tabIndex | `number` | - | - |
| title | `string` | - | - |
| translate | `"yes" \ | "no"` | - | - |
| type | `HTMLInputTypeAttribute` | - | - |
| typeof | `string` | - | - |
| unselectable | `"off" \ | "on"` | - | - |
| value | `string \ | number \ | readonly string[]` | - | - |
| vocab | `string` | - | - |
| width | `string \ | number` | - | - |