Knit UI
GitHub

Playground

Loading playground…

false
false
Playground
<Textarea
  placeholder="Write something…"
  variant="default"
  size="md"
  disabled={false}
  autosize={false}
  minRows={3}
  resize="none"
/>

Examples

Variants

The three chrome variants — default, filled, and unstyled.

Loading example…

VariantsSourceStorybook

Sizes

The seven token sizes from xxs to xxl.

Loading example…

SizesSourceStorybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSourceStorybook

Shadows

The shadow elevation prop, inherited from Box, across all token levels.

Loading example…

ShadowsSourceStorybook

Themed

Theme accent — uses Tamagui's theme prop, not a Mantine color prop.

Loading example…

ThemedSourceStorybook

With Label

Label, description and error are wired via InputBase — no extra wrapper needed.

Loading example…

With LabelSourceStorybook

With Error

Error state — toggles the error border and renders the error message below.

Loading example…

With ErrorSourceStorybook

Disabled

Disabled state — reduced opacity and pointer events off.

Loading example…

DisabledSourceStorybook

Autosize

Autosize grows the textarea as the user types, capped at maxRows.

Loading example…

AutosizeSourceStorybook

Controlled

Controlled usage — value is held in state and displayed below.

Loading example…

ControlledSourceStorybook

Autosize Controlled

Autosize with controlled state — demonstrates that the textarea re-runs the height calculation whenever the React value changes (not just on DOM input events).

Loading example…

Autosize ControlledSourceStorybook

With Sections

Left / right sections should pin to the top edge in multiline mode.

Loading example…

With SectionsSourceStorybook

Resize Handles

The resize prop exposes the CSS drag handle — sweep all four options.

Loading example…

Resize HandlesSourceStorybook

Read Only

Read-only — the value is shown but not editable, with no disabled dimming.

Loading example…

Read OnlySourceStorybook

Required

Required field — withAsterisk appends the asterisk without forcing validation.

Loading example…

RequiredSourceStorybook

Loading

Loading indicator in either section — pins to the top edge in multiline mode.

Loading example…

LoadingSourceStorybook

Character Limit

Character limit — maxLength caps input; a live counter reflects remaining chars.

Loading example…

Character LimitSourceStorybook

Styles

Per-slot styles targets individual parts — here the root frame and label.

Loading example…

StylesSourceStorybook

Prefilled

Prefilled with long content — a fixed-height field scrolls its overflow.

Loading example…

PrefilledSourceStorybook

Props

PropTypeDefaultDescription
autoCapitalize"none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | undefined——
autoCompletestring | undefined——
autoCorrectstring | boolean | undefined——
autoFocusboolean | undefined——
autosizeboolean | undefinedfalseWhen true the textarea grows with its content (web only).
childrenReactNode—Rendered inside the host element. Only meaningful for the `button` host (e.g. FileInput's trigger displays the picked file name); ignored for the native `input`/`textarea`/`select` hosts.
componentInputHostTag | undefined—Override the host element tag (defaults to `input`/`textarea`).
cursorColor"unset" | ColorTokens | undefined——
defaultValuestring | number | readonly string[] | undefined——
descriptionReactNode——
descriptionPropsGetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean | undefined; size?: string | number | undefined; inherit?: boolean | undefined; lineClamp?: number | undefined; truncate?: boolean | "end" | "start" | undefined;…——
disabled systemboolean | undefinedfalse—
enterKeyHint"search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined——
errorReactNode—Error message — toggles error styling.
errorPropsGetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean | undefined; size?: string | number | undefined; inherit?: boolean | undefined; lineClamp?: number | undefined; truncate?: boolean | "end" | "start" | undefined;…——
idstring | undefined—Same as the web id property for setting a uid on an element
inputContainer((children: ReactNode) => ReactNode) | undefined——
inputSizestring | undefined—Host size attribute for the input element
inputWrapperOrderInputWrapperOrderItem[] | undefined——
labelReactNode——
labelElement"div" | "label" | undefined——
labelPropsInputLabelProps | undefined——
leftSectionReactNode—Content section displayed on the left side of the input
leftSectionPointerEventsInputSectionPointerEvents | undefined"none"Sets pointer-events styles on the left section element
leftSectionPropsPartial<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { shadow?: "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined; sectionPointerEvents?: "none" | "all" | undefined; }>> | undefined—Props passed down to the left section element
leftSectionWidthnumber | Animated.AnimatedNode | GetThemeValueForKey<"width"> | null | undefined—Left section width, by default equals to the input height
loadingboolean | undefined—Displays loading indicator in the left or right section
loadingPosition"left" | "right" | undefined"right"Position of the loading indicator
maxstring | number | undefined——
maxLengthnumber | undefined——
maxRowsnumber | undefined—Maximum rows before the autosize textarea starts scrolling (web only).
minstring | number | undefined——
minLengthnumber | undefined——
minRowsnumber | undefined2Minimum number of visible rows / initial height.
multilineundefined—Textarea always renders a multiline host; this prop is intentionally owned.
multipleboolean | undefined——
namestring | undefined——
onChangeText((text: string) => void) | undefined—Fires on every change with just the string value.
onSelectionChange((event: InputSelectionChangePayload) => void) | undefined—Fires when the text selection changes.
onSubmitEditing((event: InputTextEventPayload) => void) | undefined—Fires when Enter/Return is pressed.
patternstring | undefined——
placeholderstring | undefinedWrite something…—
placeholderTextColor"unset" | ColorTokens | undefined——
pointerboolean | undefined—Determines whether the input should have cursor: pointer style
radius systemstring | number | undefined—Key of theme radius or a valid CSS value to set border-radius
readOnlyboolean | undefined——
requiredboolean | undefined——
resizeTextareaResize | undefined
none · both · horizontal · vertical
"none"CSS `resize` property — controls the drag handle (web only).
rightSectionReactNode—Content section displayed on the right side of the input
rightSectionPointerEventsInputSectionPointerEvents | undefined"none"Sets pointer-events styles on the right section element
rightSectionPropsPartial<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { shadow?: "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined; sectionPointerEvents?: "none" | "all" | undefined; }>> | undefined—Props passed down to the right section element
rightSectionWidthnumber | Animated.AnimatedNode | GetThemeValueForKey<"width"> | null | undefined—Right section width, by default equals to the input height
rootRefRef<TamaguiElement> | undefined—Root element ref
rowsnumber | undefined—Rows for textarea (when render="textarea")
selection{ start: number; end?: number; } | undefined—Selection range
selectionColor"unset" | ColorTokens | undefined——
selectionHandleColor"unset" | ColorTokens | undefined——
shadow system"xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined——
size systemInputSize | undefined
xxs · xs · sm · md · lg · xl · xxl
mdControls height, padding, radius and font size.
spellCheckboolean | undefined—Controls spell checking.
stepstring | number | undefined——
styles systemSlotStyles<InputWrapperSlots> | undefined—Uniform per-slot style passthrough — sugar over the composable parts. Slots: `wrapper` / `label` / `description` / `error` / `required`.
textContentTypeInputTextContentType | undefined—Text content type for iOS autofill. Use `autoComplete` where available.
theme systemThemeName | null | undefined
unset · blue · red · green · yellow · pink · gray
—Tamagui accent theme applied to focused and error-adjacent chrome.
typestring | undefined——
underlineColorAndroid"unset" | ColorTokens | undefined——
valuestring | number | readonly string[] | undefined——
variant systemInputVariant | undefined
default · filled · unstyled
"default"Visual variant of the input chrome.
withAriaboolean | undefinedtrueDetermines whether accessibility attributes should be added
withAsteriskboolean | undefined——
wrapperProps({ readonly br?: number | "$xs" | "$sm" | "$md" | "$lg" | "$xl" | "unset" | "$0" | "$true" | "$xxs" | "$xxl" | Variable<any> | `${number}rem` | UnionableNumber | "inherit" | `var(${string})` | Animated.AnimatedNode | null | undefined; label…—Props passed down to the root element (`Input.Wrapper` component)

Style slots

Every part of Textarea can be styled through the styles prop. Explicit props on the component always win over slot styles.

SlotTargets
descriptionThe Input.Description.
errorThe Input.Error.
labelThe Input.Label.
leftSectionThe left adornment section (InputSectionFrame). Applied by InputChrome. The deprecated leftSectionProps alias merges OVER this.
requiredThe required asterisk Text inside the label.
rightSectionThe right adornment section (InputSectionFrame). Applied by InputChrome. The deprecated rightSectionProps alias merges OVER this.
rootThe input frame/container (InputRootFrame) that InputChrome lays the control and its left/right sections out in. Applied by Input/InputChrome, not by Input.Wrapper. The deprecated wrapperProps alias merges OVER this.
wrapperThe outer InputWrapperFrame column.
Accessibility & DOM props (218)
PropType
aboutstring | undefined
acceptstring | undefined
accessKeystring | undefined
altstring | undefined
aria-activedescendantstring | undefined
aria-atomic(boolean | "true" | "false") | undefined
aria-autocomplete"none" | "inline" | "list" | "both" | undefined
aria-braillelabelstring | undefined
aria-brailleroledescriptionstring | undefined
aria-colcountnumber | undefined
aria-colindexnumber | undefined
aria-colindextextstring | undefined
aria-colspannumber | undefined
aria-controlsstring | undefined
aria-currentboolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined
aria-describedbystring | undefined
aria-descriptionstring | undefined
aria-detailsstring | undefined
aria-dropeffect"link" | "none" | "copy" | "move" | "execute" | "popup" | undefined
aria-errormessagestring | undefined
aria-flowtostring | undefined
aria-grabbed(boolean | "true" | "false") | undefined
aria-haspopupboolean | "dialog" | "menu" | "true" | "false" | "grid" | "tree" | "listbox" | undefined
aria-invalidboolean | "true" | "false" | "grammar" | "spelling" | undefined
aria-keyshortcutsstring | undefined
aria-levelnumber | undefined
aria-multiline(boolean | "true" | "false") | undefined
aria-multiselectable(boolean | "true" | "false") | undefined
aria-orientation"horizontal" | "vertical" | undefined
aria-ownsstring | undefined
aria-placeholderstring | undefined
aria-posinsetnumber | undefined
aria-pressedboolean | "true" | "false" | "mixed" | undefined
aria-readonly(boolean | "true" | "false") | undefined
aria-relevant"all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined
aria-required(boolean | "true" | "false") | undefined
aria-roledescriptionstring | undefined
aria-rowcountnumber | undefined
aria-rowindexnumber | undefined
aria-rowindextextstring | undefined
aria-rowspannumber | undefined
aria-setsizenumber | undefined
aria-sort"none" | "ascending" | "descending" | "other" | undefined
autoSavestring | undefined
captureboolean | "user" | "environment" | undefined
checkedboolean | undefined
contentEditable"inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined
contextMenustring | undefined
datatypestring | undefined
defaultCheckedboolean | undefined
dirstring | undefined
draggable(boolean | "true" | "false") | undefined
exportpartsstring | undefined
formstring | undefined
formActionstring | ((formData: FormData) => void | Promise<void>) | undefined
formEncTypestring | undefined
formMethodstring | undefined
formNoValidateboolean | undefined
formTargetstring | undefined
hiddenboolean | undefined
inertboolean | undefined
inlistany
inputMode"search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined
isstring | undefined
itemIDstring | undefined
itemPropstring | undefined
itemRefstring | undefined
itemScopeboolean | undefined
itemTypestring | undefined
keyKey | null | undefined
langstring | undefined
liststring | undefined
noncestring | undefined
onAbortReactEventHandler<HTMLInputElement> | undefined
onAbortCaptureReactEventHandler<HTMLInputElement> | undefined
onAnimationEndAnimationEventHandler<HTMLInputElement> | undefined
onAnimationEndCaptureAnimationEventHandler<HTMLInputElement> | undefined
onAnimationIterationAnimationEventHandler<HTMLInputElement> | undefined
onAnimationIterationCaptureAnimationEventHandler<HTMLInputElement> | undefined
onAnimationStartAnimationEventHandler<HTMLInputElement> | undefined
onAnimationStartCaptureAnimationEventHandler<HTMLInputElement> | undefined
onAuxClickMouseEventHandler<HTMLInputElement> | undefined
onAuxClickCaptureMouseEventHandler<HTMLInputElement> | undefined
onBeforeInputCaptureInputEventHandler<HTMLInputElement> | undefined
onBeforeToggleToggleEventHandler<HTMLInputElement> | undefined
onBlurCaptureFocusEventHandler<HTMLInputElement> | undefined
onCanPlayReactEventHandler<HTMLInputElement> | undefined
onCanPlayCaptureReactEventHandler<HTMLInputElement> | undefined
onCanPlayThroughReactEventHandler<HTMLInputElement> | undefined
onCanPlayThroughCaptureReactEventHandler<HTMLInputElement> | undefined
onChangeCaptureChangeEventHandler<HTMLInputElement, Element> | undefined
onClickCaptureMouseEventHandler<HTMLInputElement> | undefined
onCompositionEndCompositionEventHandler<HTMLInputElement> | undefined
onCompositionEndCaptureCompositionEventHandler<HTMLInputElement> | undefined
onCompositionStartCompositionEventHandler<HTMLInputElement> | undefined
onCompositionStartCaptureCompositionEventHandler<HTMLInputElement> | undefined
onCompositionUpdateCompositionEventHandler<HTMLInputElement> | undefined
onCompositionUpdateCaptureCompositionEventHandler<HTMLInputElement> | undefined
onContextMenuCaptureMouseEventHandler<HTMLInputElement> | undefined
onCopyCaptureClipboardEventHandler<HTMLInputElement> | undefined
onCutCaptureClipboardEventHandler<HTMLInputElement> | undefined
onDoubleClickCaptureMouseEventHandler<HTMLInputElement> | undefined
onDragCaptureDragEventHandler<HTMLInputElement> | undefined
onDragEndCaptureDragEventHandler<HTMLInputElement> | undefined
onDragEnterCaptureDragEventHandler<HTMLInputElement> | undefined
onDragExitDragEventHandler<HTMLInputElement> | undefined
onDragExitCaptureDragEventHandler<HTMLInputElement> | undefined
onDragLeaveCaptureDragEventHandler<HTMLInputElement> | undefined
onDragOverCaptureDragEventHandler<HTMLInputElement> | undefined
onDragStartCaptureDragEventHandler<HTMLInputElement> | undefined
onDropCaptureDragEventHandler<HTMLInputElement> | undefined
onDurationChangeReactEventHandler<HTMLInputElement> | undefined
onDurationChangeCaptureReactEventHandler<HTMLInputElement> | undefined
onEmptiedReactEventHandler<HTMLInputElement> | undefined
onEmptiedCaptureReactEventHandler<HTMLInputElement> | undefined
onEncryptedReactEventHandler<HTMLInputElement> | undefined
onEncryptedCaptureReactEventHandler<HTMLInputElement> | undefined
onEndedReactEventHandler<HTMLInputElement> | undefined
onEndedCaptureReactEventHandler<HTMLInputElement> | undefined
onErrorReactEventHandler<HTMLInputElement> | undefined
onErrorCaptureReactEventHandler<HTMLInputElement> | undefined
onFocusCaptureFocusEventHandler<HTMLInputElement> | undefined
onGotPointerCapturePointerEventHandler<HTMLInputElement> | undefined
onGotPointerCaptureCapturePointerEventHandler<HTMLInputElement> | undefined
onInputCaptureInputEventHandler<HTMLInputElement> | undefined
onInvalidReactEventHandler<HTMLInputElement> | undefined
onInvalidCaptureReactEventHandler<HTMLInputElement> | undefined
onKeyDownCaptureKeyboardEventHandler<HTMLInputElement> | undefined
onKeyPressKeyboardEventHandler<HTMLInputElement> | undefined
onKeyPressCaptureKeyboardEventHandler<HTMLInputElement> | undefined
onKeyUpCaptureKeyboardEventHandler<HTMLInputElement> | undefined
onLoadReactEventHandler<HTMLInputElement> | undefined
onLoadCaptureReactEventHandler<HTMLInputElement> | undefined
onLoadedDataReactEventHandler<HTMLInputElement> | undefined
onLoadedDataCaptureReactEventHandler<HTMLInputElement> | undefined
onLoadedMetadataReactEventHandler<HTMLInputElement> | undefined
onLoadedMetadataCaptureReactEventHandler<HTMLInputElement> | undefined
onLoadStartReactEventHandler<HTMLInputElement> | undefined
onLoadStartCaptureReactEventHandler<HTMLInputElement> | undefined
onLostPointerCapturePointerEventHandler<HTMLInputElement> | undefined
onLostPointerCaptureCapturePointerEventHandler<HTMLInputElement> | undefined
onMouseDownCaptureMouseEventHandler<HTMLInputElement> | undefined
onMouseMoveCaptureMouseEventHandler<HTMLInputElement> | undefined
onMouseOutCaptureMouseEventHandler<HTMLInputElement> | undefined
onMouseOverCaptureMouseEventHandler<HTMLInputElement> | undefined
onMouseUpCaptureMouseEventHandler<HTMLInputElement> | undefined
onPasteCaptureClipboardEventHandler<HTMLInputElement> | undefined
onPauseReactEventHandler<HTMLInputElement> | undefined
onPauseCaptureReactEventHandler<HTMLInputElement> | undefined
onPlayReactEventHandler<HTMLInputElement> | undefined
onPlayCaptureReactEventHandler<HTMLInputElement> | undefined
onPlayingReactEventHandler<HTMLInputElement> | undefined
onPlayingCaptureReactEventHandler<HTMLInputElement> | undefined
onPointerOutPointerEventHandler<HTMLInputElement> | undefined
onPointerOutCapturePointerEventHandler<HTMLInputElement> | undefined
onPointerOverPointerEventHandler<HTMLInputElement> | undefined
onPointerOverCapturePointerEventHandler<HTMLInputElement> | undefined
onProgressReactEventHandler<HTMLInputElement> | undefined
onProgressCaptureReactEventHandler<HTMLInputElement> | undefined
onRateChangeReactEventHandler<HTMLInputElement> | undefined
onRateChangeCaptureReactEventHandler<HTMLInputElement> | undefined
onResetReactEventHandler<HTMLInputElement> | undefined
onResetCaptureReactEventHandler<HTMLInputElement> | undefined
onScrollCaptureUIEventHandler<HTMLInputElement> | undefined
onScrollEndUIEventHandler<HTMLInputElement> | undefined
onScrollEndCaptureUIEventHandler<HTMLInputElement> | undefined
onSeekedReactEventHandler<HTMLInputElement> | undefined
onSeekedCaptureReactEventHandler<HTMLInputElement> | undefined
onSeekingReactEventHandler<HTMLInputElement> | undefined
onSeekingCaptureReactEventHandler<HTMLInputElement> | undefined
onSelectReactEventHandler<HTMLInputElement> | undefined
onSelectCaptureReactEventHandler<HTMLInputElement> | undefined
onStalledReactEventHandler<HTMLInputElement> | undefined
onStalledCaptureReactEventHandler<HTMLInputElement> | undefined
onSubmitSubmitEventHandler<HTMLInputElement> | undefined
onSubmitCaptureSubmitEventHandler<HTMLInputElement> | undefined
onSuspendReactEventHandler<HTMLInputElement> | undefined
onSuspendCaptureReactEventHandler<HTMLInputElement> | undefined
onTimeUpdateReactEventHandler<HTMLInputElement> | undefined
onTimeUpdateCaptureReactEventHandler<HTMLInputElement> | undefined
onToggleToggleEventHandler<HTMLInputElement> | undefined
onTouchCancelCaptureTouchEventHandler<HTMLInputElement> | undefined
onTouchMoveCaptureTouchEventHandler<HTMLInputElement> | undefined
onTouchStartCaptureTouchEventHandler<HTMLInputElement> | undefined
onTransitionCancelTransitionEventHandler<HTMLInputElement> | undefined
onTransitionCancelCaptureTransitionEventHandler<HTMLInputElement> | undefined
onTransitionEndTransitionEventHandler<HTMLInputElement> | undefined
onTransitionEndCaptureTransitionEventHandler<HTMLInputElement> | undefined
onTransitionRunTransitionEventHandler<HTMLInputElement> | undefined
onTransitionRunCaptureTransitionEventHandler<HTMLInputElement> | undefined
onTransitionStartTransitionEventHandler<HTMLInputElement> | undefined
onTransitionStartCaptureTransitionEventHandler<HTMLInputElement> | undefined
onVolumeChangeReactEventHandler<HTMLInputElement> | undefined
onVolumeChangeCaptureReactEventHandler<HTMLInputElement> | undefined
onWaitingReactEventHandler<HTMLInputElement> | undefined
onWaitingCaptureReactEventHandler<HTMLInputElement> | undefined
onWheelCaptureWheelEventHandler<HTMLInputElement> | undefined
partstring | undefined
popover"" | "auto" | "manual" | "hint" | undefined
popoverTargetstring | undefined
popoverTargetAction"hide" | "show" | "toggle" | undefined
prefixstring | undefined
propertystring | undefined
radioGroupstring | undefined
refRef<TamaguiElement> | undefined
resourcestring | undefined
resultsnumber | undefined
revstring | undefined
securitystring | undefined
slotstring | undefined
srcstring | undefined
suppressContentEditableWarningboolean | undefined
suppressHydrationWarningboolean | undefined
titlestring | undefined
translate"yes" | "no" | undefined
typeofstring | undefined
unselectable"off" | "on" | undefined
vocabstring | undefined

Plus 523 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.

Edit this page on GitHub