Inputs@knitui/components

Input

Input is the base text-field primitive. It renders an input or textarea host (or a custom host via component), wrapped in themed chrome that supports left/right sections, loading indicators, error styling and the Input.Wrapper/Input.Label/Input.Error/Input.Description compound parts.

WebiOSAndroidnative split8 style slots58 own props13 examples

Stories Source Tests Native source Open in Storybook

import { Input } from "@knitui/components";

Playground

Loading playground…

variantVisual variant of the input chrome.

sizeControls height, horizontal padding and font size.

radiusTheme radius token (e.g. `$sm`) or any CSS value.

disabled

false

pointerUse a pointer cursor (e.g. select-like inputs).

false

loading

false

loadingPosition

errorError message / flag — toggles error styling.

placeholder

theme

Playground

<Input
  placeholder="Type here…"
  variant="default"
  size="sm"
  disabled={false}
  loading={false}
  pointer={false}
/>

Examples

Variants

The three chrome variants.

Loading example…

VariantsSource Storybook

Sizes

The seven token sizes from xxs to xxl.

Loading example…

SizesSource Storybook

Shadows

The inherited shadow elevation prop, from xs to xl.

Loading example…

ShadowsSource Storybook

With Sections

Left and right sections hold icons, prefixes or actions.

Loading example…

With SectionsSource Storybook

Loading

Loading indicator, positioned left or right.

Loading example…

LoadingSource Storybook

Disabled

Disabled state.

Loading example…

DisabledSource Storybook

Read Only

Read-only — the value is visible and focusable but cannot be edited.

Loading example…

Read OnlySource Storybook

Error

Error state — toggles the error border and aria-invalid.

Loading example…

ErrorSource Storybook

Multiline

Multiline renders a textarea host.

Loading example…

MultilineSource Storybook

With Wrapper

Input.Wrapper ties together a label, description and error message with the correct accessibility wiring, then renders the input as its child.

Loading example…

With WrapperSource Storybook

Styles

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

Loading example…

StylesSource Storybook

Controlled

Controlled input demonstrating onChangeText.

Loading example…

ControlledSource Storybook

Props

Prop	Type	Default	Description
`autoCapitalize`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters" \| undefined`	—
`autoComplete`	`string \| undefined`	—
`autoCorrect`	`string \| boolean \| undefined`	—
`autoFocus`	`boolean \| undefined`	—
`autosize`	`boolean \| undefined`	`false`	Grows with content on web (scrollHeight-based); tracks onContentSizeChange on native.
`children`	`ReactNode`	—	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.
`component`	`InputHostTag \| undefined`	—	Override the host element tag (defaults to `input`/`textarea`).
`cursorColor`	`"unset" \| ColorTokens \| undefined`	—
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—
`disabled` system	`boolean \| undefined`	`false`
`enterKeyHint`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send" \| undefined`	—
`error`	`ReactNode`	—	Error message / flag — toggles error styling.
`id`	`string \| undefined`	—
`inputSize`	`string \| undefined`	—	Host size attribute for the input element
`leftSection`	`ReactNode`	—	Content section displayed on the left side of the input
`leftSectionPointerEvents`	`InputSectionPointerEvents \| undefined`	`"none"`	Sets pointer-events styles on the left section element
`leftSectionProps`	`Partial<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
`leftSectionWidth`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"width"> \| null \| undefined`	—	Left section width, by default equals to the input height
`loading`	`boolean \| undefined`	`false`	Displays loading indicator in the left or right section
`loadingPosition`	`"left" \| "right" \| undefined` left · right	`"right"`	Position of the loading indicator
`max`	`string \| number \| undefined`	—
`maxLength`	`number \| undefined`	—
`maxRows`	`number \| undefined`	—	Maximum number of rows before scrolling (web). Caps height on native when autosize is on.
`min`	`string \| number \| undefined`	—
`minLength`	`number \| undefined`	—
`minRows`	`number \| undefined`	—	Minimum number of rows. Sets initial/minimum height on web; maps to numberOfLines on native.
`multiline`	`boolean \| undefined`	—	Adjusts padding and sizing calculations for multiline inputs
`multiple`	`boolean \| undefined`	—
`name`	`string \| undefined`	—
`onChange`	`ChangeEventHandler<HTMLInputElement, HTMLInputElement> \| undefined`	—
`onChangeText`	`((text: string) => void) \| undefined`	—	Fires on every change with just the string value.
`onInput`	`InputEventHandler<HTMLInputElement> \| undefined`	—
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement> \| undefined`	—
`onSelectionChange`	`((event: InputSelectionChangePayload) => void) \| undefined`	—	Fires when the text selection changes.
`onSubmitEditing`	`((event: InputTextEventPayload) => void) \| undefined`	—	Fires when Enter/Return is pressed.
`pattern`	`string \| undefined`	—
`placeholder`	`string \| undefined`	`Type here…`
`placeholderTextColor`	`"unset" \| ColorTokens \| undefined`	—
`pointer`	`boolean \| undefined`	`false`	Use a pointer cursor (e.g. select-like inputs).
`radius` system	`string \| number \| undefined`	—	Theme radius token (e.g. `$sm`) or any CSS value.
`readOnly`	`boolean \| undefined`	—
`required`	`boolean \| undefined`	—
`rightSection`	`ReactNode`	—	Content section displayed on the right side of the input
`rightSectionPointerEvents`	`InputSectionPointerEvents \| undefined`	`"none"`	Sets pointer-events styles on the right section element
`rightSectionProps`	`Partial<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
`rightSectionWidth`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"width"> \| null \| undefined`	—	Right section width, by default equals to the input height
`rootRef`	`Ref<TamaguiElement> \| undefined`	—	Root element ref
`rows`	`number \| 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` system	`InputSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"sm"`	Controls height, horizontal padding and font size.
`spellCheck`	`boolean \| undefined`	—	Controls spell checking.
`step`	`string \| number \| undefined`	—
`styles` system	`SlotStyles<InputWrapperSlots> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. The `Input` host consumes the adornment slots (`root`/`leftSection`/`rightSection`); the field-chrome slots (`wrapper`/`label`/`description`/`error`/`required`) are consumed by `Input.Wrapper`. Forwarding the same map to both is safe — each applies only the slots it owns.
`textContentType`	`InputTextContentType \| undefined`	—	Text content type for iOS autofill. Use `autoComplete` where available.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · pink	—	Applies a theme to this element
`type`	`string \| undefined`	—
`underlineColorAndroid`	`"unset" \| ColorTokens \| undefined`	—
`unstyled`	`boolean \| undefined`	—	Removes the host chrome so the input renders bare (used by composite inputs).
`value`	`string \| number \| readonly string[] \| undefined`	—
`variant` system	`InputVariant \| undefined` default · filled · unstyled	`"default"`	Visual variant of the input chrome.
`withAria`	`boolean \| undefined`	`true`	Determines whether accessibility attributes should be added
`wrapperProps`	`Partial<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { radius?: string \| number \| undefined; size?: string \| number \| undefined; shadow?: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined; disabled?: boolean \| undefi…`	—

Style slots

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

Slot	Usage
`description`	`styles={{ description: { … } }}`
`error`	`styles={{ error: { … } }}`
`label`	`styles={{ label: { … } }}`
`leftSection`	`styles={{ leftSection: { … } }}`
`required`	`styles={{ required: { … } }}`
`rightSection`	`styles={{ rightSection: { … } }}`
`root`	`styles={{ root: { … } }}`
`wrapper`	`styles={{ wrapper: { … } }}`

Accessibility & DOM props (280)

Prop	Type
`about`	`string \| undefined`
`accept`	`string \| undefined`
`accessKey`	`string \| undefined`
`alt`	`string \| undefined`
`aria-activedescendant`	`string \| undefined`
`aria-atomic`	`(boolean \| "true" \| "false") \| undefined`
`aria-autocomplete`	`"none" \| "inline" \| "list" \| "both" \| undefined`
`aria-braillelabel`	`string \| undefined`
`aria-brailleroledescription`	`string \| undefined`
`aria-busy`	`(boolean \| "true" \| "false") \| undefined`
`aria-checked`	`boolean \| "true" \| "false" \| "mixed" \| undefined`
`aria-colcount`	`number \| undefined`
`aria-colindex`	`number \| undefined`
`aria-colindextext`	`string \| undefined`
`aria-colspan`	`number \| undefined`
`aria-controls`	`string \| undefined`
`aria-current`	`boolean \| "time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| undefined`
`aria-describedby`	`string \| undefined`
`aria-description`	`string \| undefined`
`aria-details`	`string \| undefined`
`aria-disabled`	`(boolean \| "true" \| "false") \| undefined`
`aria-dropeffect`	`"link" \| "none" \| "copy" \| "move" \| "execute" \| "popup" \| undefined`
`aria-errormessage`	`string \| undefined`
`aria-expanded`	`(boolean \| "true" \| "false") \| undefined`
`aria-flowto`	`string \| undefined`
`aria-grabbed`	`(boolean \| "true" \| "false") \| undefined`
`aria-haspopup`	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "tree" \| "listbox" \| undefined`
`aria-hidden`	`(boolean \| "true" \| "false") \| undefined`
`aria-invalid`	`boolean \| "true" \| "false" \| "grammar" \| "spelling" \| undefined`
`aria-keyshortcuts`	`string \| undefined`
`aria-label`	`string \| undefined`
`aria-labelledby`	`string \| undefined`
`aria-level`	`number \| undefined`
`aria-live`	`"polite" \| "assertive" \| "off" \| undefined`
`aria-modal`	`(boolean \| "true" \| "false") \| undefined`
`aria-multiline`	`(boolean \| "true" \| "false") \| undefined`
`aria-multiselectable`	`(boolean \| "true" \| "false") \| undefined`
`aria-orientation`	`"horizontal" \| "vertical" \| undefined`
`aria-owns`	`string \| undefined`
`aria-placeholder`	`string \| undefined`
`aria-posinset`	`number \| undefined`
`aria-pressed`	`boolean \| "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-roledescription`	`string \| undefined`
`aria-rowcount`	`number \| undefined`
`aria-rowindex`	`number \| undefined`
`aria-rowindextext`	`string \| undefined`
`aria-rowspan`	`number \| undefined`
`aria-selected`	`(boolean \| "true" \| "false") \| undefined`
`aria-setsize`	`number \| undefined`
`aria-sort`	`"none" \| "ascending" \| "descending" \| "other" \| undefined`
`aria-valuemax`	`number \| undefined`
`aria-valuemin`	`number \| undefined`
`aria-valuenow`	`number \| undefined`
`aria-valuetext`	`string \| undefined`
`autoSave`	`string \| undefined`
`capture`	`boolean \| "user" \| "environment" \| undefined`
`checked`	`boolean \| undefined`
`content`	`string \| undefined`
`contentEditable`	`"inherit" \| (boolean \| "true" \| "false") \| "plaintext-only" \| undefined`
`contextMenu`	`string \| undefined`
`dangerouslySetInnerHTML`	`{ __html: string \| TrustedHTML; } \| undefined`
`datatype`	`string \| undefined`
`defaultChecked`	`boolean \| undefined`
`dir`	`string \| undefined`
`draggable`	`(boolean \| "true" \| "false") \| undefined`
`exportparts`	`string \| undefined`
`form`	`string \| undefined`
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>) \| undefined`
`formEncType`	`string \| undefined`
`formMethod`	`string \| undefined`
`formNoValidate`	`boolean \| undefined`
`formTarget`	`string \| undefined`
`height`	`string \| number \| undefined`
`hidden`	`boolean \| undefined`
`inert`	`boolean \| undefined`
`inlist`	`any`
`inputMode`	`"search" \| "none" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal" \| undefined`
`is`	`string \| undefined`
`itemID`	`string \| undefined`
`itemProp`	`string \| undefined`
`itemRef`	`string \| undefined`
`itemScope`	`boolean \| undefined`
`itemType`	`string \| undefined`
`key`	`Key \| null \| undefined`
`lang`	`string \| undefined`
`list`	`string \| undefined`
`nonce`	`string \| undefined`
`onAbort`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onAbortCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onAnimationEnd`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationEndCapture`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationIteration`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationStart`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationStartCapture`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAuxClick`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onAuxClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onBeforeInput`	`InputEventHandler<HTMLInputElement> \| undefined`
`onBeforeInputCapture`	`InputEventHandler<HTMLInputElement> \| undefined`
`onBeforeToggle`	`ToggleEventHandler<HTMLInputElement> \| undefined`
`onBlur`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onBlurCapture`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onCanPlay`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onCanPlayCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onCanPlayThrough`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onCanPlayThroughCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onChangeCapture`	`ChangeEventHandler<HTMLInputElement, Element> \| undefined`
`onClick`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onCompositionEnd`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionEndCapture`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionStart`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionStartCapture`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionUpdate`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionUpdateCapture`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onContextMenu`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onContextMenuCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onCopy`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCopyCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCut`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCutCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onDoubleClick`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onDoubleClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onDrag`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnd`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEndCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnter`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnterCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragExit`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragExitCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragLeave`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragLeaveCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragOver`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragOverCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragStart`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragStartCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDrop`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDropCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDurationChange`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onDurationChangeCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEmptied`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEmptiedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEncrypted`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEncryptedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEnded`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEndedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onError`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onErrorCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onFocus`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onFocusCapture`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onGotPointerCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onInputCapture`	`InputEventHandler<HTMLInputElement> \| undefined`
`onInvalid`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onInvalidCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onKeyDownCapture`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyPress`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyPressCapture`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyUp`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyUpCapture`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onLoad`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedData`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedDataCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedMetadata`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedMetadataCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadStart`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadStartCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLostPointerCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onMouseDown`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseDownCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseEnter`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseLeave`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseMove`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseMoveCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOut`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOutCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOver`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOverCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseUp`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseUpCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onPaste`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onPasteCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onPause`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPauseCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlay`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlayCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlaying`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlayingCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPointerCancel`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerCancelCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerDown`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerDownCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerEnter`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerLeave`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerMove`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerMoveCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOut`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOutCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOver`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOverCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerUp`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerUpCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onProgress`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onProgressCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onRateChange`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onRateChangeCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onReset`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onResetCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onScroll`	`UIEventHandler<HTMLInputElement> \| undefined`
`onScrollCapture`	`UIEventHandler<HTMLInputElement> \| undefined`
`onScrollEnd`	`UIEventHandler<HTMLInputElement> \| undefined`
`onScrollEndCapture`	`UIEventHandler<HTMLInputElement> \| undefined`
`onSeeked`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSeekedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSeeking`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSeekingCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSelect`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSelectCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onStalled`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onStalledCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSubmit`	`SubmitEventHandler<HTMLInputElement> \| undefined`
`onSubmitCapture`	`SubmitEventHandler<HTMLInputElement> \| undefined`
`onSuspend`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSuspendCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onTimeUpdate`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onTimeUpdateCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onToggle`	`ToggleEventHandler<HTMLInputElement> \| undefined`
`onTouchCancel`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchCancelCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchEnd`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchEndCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchMove`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchMoveCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchStart`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchStartCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTransitionCancel`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionEnd`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionEndCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionRun`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionRunCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionStart`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionStartCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onVolumeChange`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onVolumeChangeCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onWaiting`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onWaitingCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onWheel`	`WheelEventHandler<HTMLInputElement> \| undefined`
`onWheelCapture`	`WheelEventHandler<HTMLInputElement> \| undefined`
`part`	`string \| undefined`
`popover`	`"" \| "auto" \| "manual" \| "hint" \| undefined`
`popoverTarget`	`string \| undefined`
`popoverTargetAction`	`"hide" \| "show" \| "toggle" \| undefined`
`prefix`	`string \| undefined`
`property`	`string \| undefined`
`radioGroup`	`string \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`
`rel`	`string \| undefined`
`resource`	`string \| undefined`
`results`	`number \| undefined`
`rev`	`string \| undefined`
`role`	`AriaRole \| undefined`
`security`	`string \| undefined`
`slot`	`string \| undefined`
`src`	`string \| undefined`
`suppressContentEditableWarning`	`boolean \| undefined`
`suppressHydrationWarning`	`boolean \| undefined`
`tabIndex`	`number \| undefined`
`title`	`string \| undefined`
`translate`	`"yes" \| "no" \| undefined`
`typeof`	`string \| undefined`
`unselectable`	`"off" \| "on" \| undefined`
`vocab`	`string \| undefined`
`width`	`string \| number \| undefined`

Plus 457 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.