Input
An input is a primitive component used when composing fields, like text fields, search fields, etc.
Preview
Code
Examples
Borderless
Preview
Code
Disabled
Preview
Code
With Icon
Preview
Code
Invalid
Preview
Code
Props
Name | Type | Default |
|---|---|---|
onClick | MouseEventHandler<HTMLInputElement> | — |
autoFocus | boolean | — |
onFocus | FocusEventHandler<HTMLInputElement> | — |
onBlur | FocusEventHandler<HTMLInputElement> | — |
onKeyDown | KeyboardEventHandler<HTMLInputElement> | — |
onKeyUp | KeyboardEventHandler<HTMLInputElement> | — |
rel | string | — |
slot | string | — |
id | string | — |
type | HTMLInputTypeAttribute | — |
form | string | — |
formAction | string | ((formData: FormData) => void | Promise<void>) | — |
formEncType | string | — |
formMethod | string | — |
formNoValidate | boolean | — |
formTarget | string | — |
name | string | — |
value | string | number | readonly string[] | — |
step | string | number | — |
list | string | — |
title | string | — |
pattern | string | — |
defaultChecked | boolean | — |
defaultValue | string | number | readonly string[] | — |
suppressContentEditableWarning | boolean | — |
suppressHydrationWarning | boolean | — |
accessKey | string | — |
autoCapitalize | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters" | — |
contentEditable | Booleanish | "inherit" | "plaintext-only" | — |
contextMenu | string | — |
dir | string | — |
draggable | Booleanish | — |
enterKeyHint | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | — |
hidden | boolean | — |
lang | string | — |
nonce | string | — |
spellCheck | Booleanish | — |
tabIndex | number | — |
translate | "yes" | "no" | — |
radioGroup | string | — |
role | AriaRole | — |
about | string | — |
content | string | — |
datatype | string | — |
inlist | any | — |
prefix | string | — |
property | string | — |
resource | string | — |
rev | string | — |
typeof | string | — |
vocab | string | — |
autoCorrect | string | — |
autoSave | string | — |
color | string | — |
itemProp | string | — |
itemScope | boolean | — |
itemType | string | — |
itemID | string | — |
itemRef | string | — |
results | number | — |
security | string | — |
unselectable | "off" | "on" | — |
popover | "" | "auto" | "manual" | — |
popoverTargetAction | "toggle" | "show" | "hide" | — |
popoverTarget | string | — |
inert | boolean | — |
inputMode | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | — |
is | string | — |
exportparts | string | — |
part | string | — |
dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | — |
onCopy | ClipboardEventHandler<HTMLInputElement> | — |
onCopyCapture | ClipboardEventHandler<HTMLInputElement> | — |
onCut | ClipboardEventHandler<HTMLInputElement> | — |
onCutCapture | ClipboardEventHandler<HTMLInputElement> | — |
onPaste | ClipboardEventHandler<HTMLInputElement> | — |
onPasteCapture | ClipboardEventHandler<HTMLInputElement> | — |
onCompositionEnd | CompositionEventHandler<HTMLInputElement> | — |
onCompositionEndCapture | CompositionEventHandler<HTMLInputElement> | — |
onCompositionStart | CompositionEventHandler<HTMLInputElement> | — |
onCompositionStartCapture | CompositionEventHandler<HTMLInputElement> | — |
onCompositionUpdate | CompositionEventHandler<HTMLInputElement> | — |
onCompositionUpdateCapture | CompositionEventHandler<HTMLInputElement> | — |
onFocusCapture | FocusEventHandler<HTMLInputElement> | — |
onBlurCapture | FocusEventHandler<HTMLInputElement> | — |
onChange | ChangeEventHandler<HTMLInputElement> | — |
onChangeCapture | FormEventHandler<HTMLInputElement> | — |
onBeforeInput | FormEventHandler<HTMLInputElement> | — |
onBeforeInputCapture | FormEventHandler<HTMLInputElement> | — |
onInput | FormEventHandler<HTMLInputElement> | — |
onInputCapture | FormEventHandler<HTMLInputElement> | — |
onReset | FormEventHandler<HTMLInputElement> | — |
onResetCapture | FormEventHandler<HTMLInputElement> | — |
onSubmit | FormEventHandler<HTMLInputElement> | — |
onSubmitCapture | FormEventHandler<HTMLInputElement> | — |
onInvalid | FormEventHandler<HTMLInputElement> | — |
onInvalidCapture | FormEventHandler<HTMLInputElement> | — |
onLoad | ReactEventHandler<HTMLInputElement> | — |
onLoadCapture | ReactEventHandler<HTMLInputElement> | — |
onError | ReactEventHandler<HTMLInputElement> | — |
onErrorCapture | ReactEventHandler<HTMLInputElement> | — |
onKeyDownCapture | KeyboardEventHandler<HTMLInputElement> | — |
onKeyPress | KeyboardEventHandler<HTMLInputElement> | — |
onKeyPressCapture | KeyboardEventHandler<HTMLInputElement> | — |
onKeyUpCapture | KeyboardEventHandler<HTMLInputElement> | — |
onAbort | ReactEventHandler<HTMLInputElement> | — |
onAbortCapture | ReactEventHandler<HTMLInputElement> | — |
onCanPlay | ReactEventHandler<HTMLInputElement> | — |
onCanPlayCapture | ReactEventHandler<HTMLInputElement> | — |
onCanPlayThrough | ReactEventHandler<HTMLInputElement> | — |
onCanPlayThroughCapture | ReactEventHandler<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> | — |
onLoadedData | ReactEventHandler<HTMLInputElement> | — |
onLoadedDataCapture | ReactEventHandler<HTMLInputElement> | — |
onLoadedMetadata | ReactEventHandler<HTMLInputElement> | — |
onLoadedMetadataCapture | ReactEventHandler<HTMLInputElement> | — |
onLoadStart | ReactEventHandler<HTMLInputElement> | — |
onLoadStartCapture | ReactEventHandler<HTMLInputElement> | — |
onPause | ReactEventHandler<HTMLInputElement> | — |
onPauseCapture | ReactEventHandler<HTMLInputElement> | — |
onPlay | ReactEventHandler<HTMLInputElement> | — |
onPlayCapture | ReactEventHandler<HTMLInputElement> | — |
onPlaying | ReactEventHandler<HTMLInputElement> | — |
onPlayingCapture | ReactEventHandler<HTMLInputElement> | — |
onProgress | ReactEventHandler<HTMLInputElement> | — |
onProgressCapture | ReactEventHandler<HTMLInputElement> | — |
onRateChange | ReactEventHandler<HTMLInputElement> | — |
onRateChangeCapture | ReactEventHandler<HTMLInputElement> | — |
onSeeked | ReactEventHandler<HTMLInputElement> | — |
onSeekedCapture | ReactEventHandler<HTMLInputElement> | — |
onSeeking | ReactEventHandler<HTMLInputElement> | — |
onSeekingCapture | ReactEventHandler<HTMLInputElement> | — |
onStalled | ReactEventHandler<HTMLInputElement> | — |
onStalledCapture | ReactEventHandler<HTMLInputElement> | — |
onSuspend | ReactEventHandler<HTMLInputElement> | — |
onSuspendCapture | ReactEventHandler<HTMLInputElement> | — |
onTimeUpdate | ReactEventHandler<HTMLInputElement> | — |
onTimeUpdateCapture | ReactEventHandler<HTMLInputElement> | — |
onVolumeChange | ReactEventHandler<HTMLInputElement> | — |
onVolumeChangeCapture | ReactEventHandler<HTMLInputElement> | — |
onWaiting | ReactEventHandler<HTMLInputElement> | — |
onWaitingCapture | ReactEventHandler<HTMLInputElement> | — |
onAuxClick | MouseEventHandler<HTMLInputElement> | — |
onAuxClickCapture | MouseEventHandler<HTMLInputElement> | — |
onClickCapture | MouseEventHandler<HTMLInputElement> | — |
onContextMenu | MouseEventHandler<HTMLInputElement> | — |
onContextMenuCapture | MouseEventHandler<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> | — |
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> | — |
onSelect | ReactEventHandler<HTMLInputElement> | — |
onSelectCapture | ReactEventHandler<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> | — |
onPointerDown | PointerEventHandler<HTMLInputElement> | — |
onPointerDownCapture | PointerEventHandler<HTMLInputElement> | — |
onPointerMove | PointerEventHandler<HTMLInputElement> | — |
onPointerMoveCapture | PointerEventHandler<HTMLInputElement> | — |
onPointerUp | PointerEventHandler<HTMLInputElement> | — |
onPointerUpCapture | PointerEventHandler<HTMLInputElement> | — |
onPointerCancel | PointerEventHandler<HTMLInputElement> | — |
onPointerCancelCapture | PointerEventHandler<HTMLInputElement> | — |
onPointerEnter | PointerEventHandler<HTMLInputElement> | — |
onPointerLeave | PointerEventHandler<HTMLInputElement> | — |
onPointerOver | PointerEventHandler<HTMLInputElement> | — |
onPointerOverCapture | PointerEventHandler<HTMLInputElement> | — |
onPointerOut | PointerEventHandler<HTMLInputElement> | — |
onPointerOutCapture | PointerEventHandler<HTMLInputElement> | — |
onGotPointerCapture | PointerEventHandler<HTMLInputElement> | — |
onGotPointerCaptureCapture | PointerEventHandler<HTMLInputElement> | — |
onLostPointerCapture | PointerEventHandler<HTMLInputElement> | — |
onLostPointerCaptureCapture | PointerEventHandler<HTMLInputElement> | — |
onScroll | UIEventHandler<HTMLInputElement> | — |
onScrollCapture | UIEventHandler<HTMLInputElement> | — |
onScrollEnd | UIEventHandler<HTMLInputElement> | — |
onScrollEndCapture | UIEventHandler<HTMLInputElement> | — |
onWheel | WheelEventHandler<HTMLInputElement> | — |
onWheelCapture | WheelEventHandler<HTMLInputElement> | — |
onAnimationStart | AnimationEventHandler<HTMLInputElement> | — |
onAnimationStartCapture | AnimationEventHandler<HTMLInputElement> | — |
onAnimationEnd | AnimationEventHandler<HTMLInputElement> | — |
onAnimationEndCapture | AnimationEventHandler<HTMLInputElement> | — |
onAnimationIteration | AnimationEventHandler<HTMLInputElement> | — |
onAnimationIterationCapture | AnimationEventHandler<HTMLInputElement> | — |
onToggle | ToggleEventHandler<HTMLInputElement> | — |
onBeforeToggle | ToggleEventHandler<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> | — |
placeholder | string | — |
minLength | number | — |
maxLength | number | — |
autoComplete | HTMLInputAutoCompleteAttribute | — |
width | string | number | — |
multiple | boolean | — |
accept | string | — |
alt | string | — |
capture | boolean | "user" | "environment" | — |
checked | boolean | — |
disabled | boolean | — |
height | string | number | — |
max | string | number | — |
min | string | number | — |
readOnly | boolean | — |
required | boolean | — |
size | number | — |
src | string | — |
onHoverStart | ((e: HoverEvent) => void) | — |
onHoverEnd | ((e: HoverEvent) => void) | — |
onHoverChange | ((isHovering: boolean) => void) | — |
className | string | ((values: InputRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: InputRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
ref | ((RefObject<HTMLInputElement | null> | ((instance: HTMLInputElement | null) => void | (() => VoidOrUndefinedOnly))) & (((instance: HTMLInputElement | null) => void) | RefObject<...>)) | null | — |
key | Key | null | — |
icon | ReactNode | — |
isBorderless | boolean | — |