TextArea
An TextArea is a primitive component used when composing fields, (e.g. TextField, SearchField, NumberField).
Preview
Code
Examples
Borderless
Preview
Code
Disabled
Preview
Code
Invalid
Preview
Code
Props
Name | Type | Default |
|---|---|---|
suppressHydrationWarning | boolean | — |
color | string | — |
id | string | — |
lang | string | — |
name | string | — |
role | AriaRole | — |
tabIndex | number | — |
dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | — |
onCopy | ClipboardEventHandler<HTMLTextAreaElement> | — |
onCopyCapture | ClipboardEventHandler<HTMLTextAreaElement> | — |
onCut | ClipboardEventHandler<HTMLTextAreaElement> | — |
onCutCapture | ClipboardEventHandler<HTMLTextAreaElement> | — |
onPaste | ClipboardEventHandler<HTMLTextAreaElement> | — |
onPasteCapture | ClipboardEventHandler<HTMLTextAreaElement> | — |
onCompositionEnd | CompositionEventHandler<HTMLTextAreaElement> | — |
onCompositionEndCapture | CompositionEventHandler<HTMLTextAreaElement> | — |
onCompositionStart | CompositionEventHandler<HTMLTextAreaElement> | — |
onCompositionStartCapture | CompositionEventHandler<HTMLTextAreaElement> | — |
onCompositionUpdate | CompositionEventHandler<HTMLTextAreaElement> | — |
onCompositionUpdateCapture | CompositionEventHandler<HTMLTextAreaElement> | — |
onFocus | FocusEventHandler<HTMLTextAreaElement> | — |
onFocusCapture | FocusEventHandler<HTMLTextAreaElement> | — |
onBlur | FocusEventHandler<HTMLTextAreaElement> | — |
onBlurCapture | FocusEventHandler<HTMLTextAreaElement> | — |
onChange | ChangeEventHandler<HTMLTextAreaElement> | — |
onChangeCapture | FormEventHandler<HTMLTextAreaElement> | — |
onBeforeInput | FormEventHandler<HTMLTextAreaElement> | — |
onBeforeInputCapture | FormEventHandler<HTMLTextAreaElement> | — |
onInput | FormEventHandler<HTMLTextAreaElement> | — |
onInputCapture | FormEventHandler<HTMLTextAreaElement> | — |
onReset | FormEventHandler<HTMLTextAreaElement> | — |
onResetCapture | FormEventHandler<HTMLTextAreaElement> | — |
onSubmit | FormEventHandler<HTMLTextAreaElement> | — |
onSubmitCapture | FormEventHandler<HTMLTextAreaElement> | — |
onInvalid | FormEventHandler<HTMLTextAreaElement> | — |
onInvalidCapture | FormEventHandler<HTMLTextAreaElement> | — |
onLoad | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onError | ReactEventHandler<HTMLTextAreaElement> | — |
onErrorCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onKeyDown | KeyboardEventHandler<HTMLTextAreaElement> | — |
onKeyDownCapture | KeyboardEventHandler<HTMLTextAreaElement> | — |
onKeyPress | KeyboardEventHandler<HTMLTextAreaElement> | — |
onKeyPressCapture | KeyboardEventHandler<HTMLTextAreaElement> | — |
onKeyUp | KeyboardEventHandler<HTMLTextAreaElement> | — |
onKeyUpCapture | KeyboardEventHandler<HTMLTextAreaElement> | — |
onAbort | ReactEventHandler<HTMLTextAreaElement> | — |
onAbortCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onCanPlay | ReactEventHandler<HTMLTextAreaElement> | — |
onCanPlayCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onCanPlayThrough | ReactEventHandler<HTMLTextAreaElement> | — |
onCanPlayThroughCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onDurationChange | ReactEventHandler<HTMLTextAreaElement> | — |
onDurationChangeCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onEmptied | ReactEventHandler<HTMLTextAreaElement> | — |
onEmptiedCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onEncrypted | ReactEventHandler<HTMLTextAreaElement> | — |
onEncryptedCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onEnded | ReactEventHandler<HTMLTextAreaElement> | — |
onEndedCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadedData | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadedDataCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadedMetadata | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadedMetadataCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadStart | ReactEventHandler<HTMLTextAreaElement> | — |
onLoadStartCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onPause | ReactEventHandler<HTMLTextAreaElement> | — |
onPauseCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onPlay | ReactEventHandler<HTMLTextAreaElement> | — |
onPlayCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onPlaying | ReactEventHandler<HTMLTextAreaElement> | — |
onPlayingCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onProgress | ReactEventHandler<HTMLTextAreaElement> | — |
onProgressCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onRateChange | ReactEventHandler<HTMLTextAreaElement> | — |
onRateChangeCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onSeeked | ReactEventHandler<HTMLTextAreaElement> | — |
onSeekedCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onSeeking | ReactEventHandler<HTMLTextAreaElement> | — |
onSeekingCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onStalled | ReactEventHandler<HTMLTextAreaElement> | — |
onStalledCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onSuspend | ReactEventHandler<HTMLTextAreaElement> | — |
onSuspendCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onTimeUpdate | ReactEventHandler<HTMLTextAreaElement> | — |
onTimeUpdateCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onVolumeChange | ReactEventHandler<HTMLTextAreaElement> | — |
onVolumeChangeCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onWaiting | ReactEventHandler<HTMLTextAreaElement> | — |
onWaitingCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onAuxClick | MouseEventHandler<HTMLTextAreaElement> | — |
onAuxClickCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onClick | MouseEventHandler<HTMLTextAreaElement> | — |
onClickCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onContextMenu | MouseEventHandler<HTMLTextAreaElement> | — |
onContextMenuCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onDoubleClick | MouseEventHandler<HTMLTextAreaElement> | — |
onDoubleClickCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onDrag | DragEventHandler<HTMLTextAreaElement> | — |
onDragCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDragEnd | DragEventHandler<HTMLTextAreaElement> | — |
onDragEndCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDragEnter | DragEventHandler<HTMLTextAreaElement> | — |
onDragEnterCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDragExit | DragEventHandler<HTMLTextAreaElement> | — |
onDragExitCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDragLeave | DragEventHandler<HTMLTextAreaElement> | — |
onDragLeaveCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDragOver | DragEventHandler<HTMLTextAreaElement> | — |
onDragOverCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDragStart | DragEventHandler<HTMLTextAreaElement> | — |
onDragStartCapture | DragEventHandler<HTMLTextAreaElement> | — |
onDrop | DragEventHandler<HTMLTextAreaElement> | — |
onDropCapture | DragEventHandler<HTMLTextAreaElement> | — |
onMouseDown | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseDownCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseEnter | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseLeave | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseMove | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseMoveCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseOut | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseOutCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseOver | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseOverCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseUp | MouseEventHandler<HTMLTextAreaElement> | — |
onMouseUpCapture | MouseEventHandler<HTMLTextAreaElement> | — |
onSelect | ReactEventHandler<HTMLTextAreaElement> | — |
onSelectCapture | ReactEventHandler<HTMLTextAreaElement> | — |
onTouchCancel | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchCancelCapture | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchEnd | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchEndCapture | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchMove | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchMoveCapture | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchStart | TouchEventHandler<HTMLTextAreaElement> | — |
onTouchStartCapture | TouchEventHandler<HTMLTextAreaElement> | — |
onPointerDown | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerDownCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerMove | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerMoveCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerUp | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerUpCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerCancel | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerCancelCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerEnter | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerLeave | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerOver | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerOverCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerOut | PointerEventHandler<HTMLTextAreaElement> | — |
onPointerOutCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onGotPointerCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onGotPointerCaptureCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onLostPointerCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onLostPointerCaptureCapture | PointerEventHandler<HTMLTextAreaElement> | — |
onScroll | UIEventHandler<HTMLTextAreaElement> | — |
onScrollCapture | UIEventHandler<HTMLTextAreaElement> | — |
onScrollEnd | UIEventHandler<HTMLTextAreaElement> | — |
onScrollEndCapture | UIEventHandler<HTMLTextAreaElement> | — |
onWheel | WheelEventHandler<HTMLTextAreaElement> | — |
onWheelCapture | WheelEventHandler<HTMLTextAreaElement> | — |
onAnimationStart | AnimationEventHandler<HTMLTextAreaElement> | — |
onAnimationStartCapture | AnimationEventHandler<HTMLTextAreaElement> | — |
onAnimationEnd | AnimationEventHandler<HTMLTextAreaElement> | — |
onAnimationEndCapture | AnimationEventHandler<HTMLTextAreaElement> | — |
onAnimationIteration | AnimationEventHandler<HTMLTextAreaElement> | — |
onAnimationIterationCapture | AnimationEventHandler<HTMLTextAreaElement> | — |
onToggle | ToggleEventHandler<HTMLTextAreaElement> | — |
onBeforeToggle | ToggleEventHandler<HTMLTextAreaElement> | — |
onTransitionCancel | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionCancelCapture | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionEnd | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionEndCapture | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionRun | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionRunCapture | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionStart | TransitionEventHandler<HTMLTextAreaElement> | — |
onTransitionStartCapture | TransitionEventHandler<HTMLTextAreaElement> | — |
autoFocus | boolean | — |
rel | string | — |
slot | string | — |
form | string | — |
value | string | number | readonly string[] | — |
autoComplete | string | — |
cols | number | — |
disabled | boolean | — |
maxLength | number | — |
minLength | number | — |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
rows | number | — |
wrap | string | — |
defaultChecked | boolean | — |
defaultValue | string | number | readonly string[] | — |
suppressContentEditableWarning | 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 | — |
nonce | string | — |
spellCheck | Booleanish | — |
title | string | — |
translate | "yes" | "no" | — |
radioGroup | string | — |
about | string | — |
content | string | — |
datatype | string | — |
inlist | any | — |
prefix | string | — |
property | string | — |
resource | string | — |
rev | string | — |
typeof | string | — |
vocab | string | — |
autoCorrect | string | — |
autoSave | 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 | — |
dirName | 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 | ((((instance: HTMLTextAreaElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLTextAreaElement | null>) & (((instance: HTMLInputElement | null) => void) | RefObject<...>)) | null | — |
key | Key | null | — |
isBorderless | boolean | — |