Inputs@knitui/components

FileInput

FileInput opens the native file picker and displays the picked file name(s). Built on FileButton + InputBase component="button". Supports single and multiple file selection, a clearable value, a custom value renderer, and imperatively clearing via resetRef.

WebiOSAndroid11 style slots65 own props12 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeControls height, horizontal padding, radius and font size.

clearableShow a clear button in the right section when a file is picked.

false

multipleAllow picking more than one file.

false

disabled

false

readOnly

false

acceptAccepted MIME types / extensions, e.g. "image/png,image/jpeg".

placeholder

label

description

error

Playground

<FileInput
  placeholder="Pick a file"
  size="sm"
  clearable={false}
  multiple={false}
  disabled={false}
  readOnly={false}
/>

Examples

Sizes

The five sizes, from xs to xl.

Loading example…

SizesSource Storybook

Shadows

The inherited shadow elevation ladder, from xs to xl.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — the picker cannot be opened and reduced opacity is applied.

Loading example…

DisabledSource Storybook

Read Only

ReadOnly state — the trigger renders but the picker will not open.

Loading example…

Read OnlySource Storybook

Clearable

Clearable — a clear button appears in the right section once a file is selected.

Loading example…

ClearableSource Storybook

Multiple

Multiple selection — comma-joined file names are displayed by default.

Loading example…

MultipleSource Storybook

Accept Images

Accept filter — restricts the native picker to image files only.

Loading example…

Accept ImagesSource Storybook

With Label And Error

With label, description, and error — demonstrates the full InputBase field layout.

Loading example…

With Label And ErrorSource Storybook

Custom Value Component

Custom value renderer — replaces the default file-name text with a bespoke component.

Loading example…

Custom Value ComponentSource Storybook

Controlled

Controlled — value and onChange are fully managed by the parent; demonstrates resetRef usage.

Loading example…

ControlledSource Storybook

Styles

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

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`accept`	`string \| undefined`	—	Accepted MIME types / extensions, e.g. "image/png,image/jpeg".
`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.
`capture`	`boolean \| "user" \| "environment" \| undefined`	—	Request a fresh capture from a device camera/mic.
`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.
`clearable`	`boolean \| undefined`	`false`	Show a clear button in the right section when a file is picked.
`clearButtonProps`	`Partial<CloseButtonProps> \| undefined`	—	Props passed down to the clear button.
`clearSectionMode`	`"default" \| "clear" \| "rightSection" \| "both" \| undefined`	`"both"`	Determines how clear button and rightSection are rendered.
`component`	`InputHostTag \| undefined`	—	Override the host element tag (defaults to `input`/`textarea`).
`defaultValue`	`FileInputValue \| undefined`	—	Uncontrolled default value.
`description`	`ReactNode`	—
`descriptionProps`	`GetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean \| undefined; size?: string \| number \| undefined; inherit?: boolean \| undefined; lineClamp?: number \| undefined; truncate?: boolean \| "end" \| "start" \| undefined;…`	—
`disabled` system	`boolean \| undefined`	`false`
`enterKeyHint`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send" \| undefined`	—
`error`	`ReactNode`	—
`errorProps`	`GetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean \| undefined; size?: string \| number \| undefined; inherit?: boolean \| undefined; lineClamp?: number \| undefined; truncate?: boolean \| "end" \| "start" \| undefined;…`	—
`fileInputProps`	`FileButtonInputProps \| undefined`	—	Props passed down to the hidden `<input type="file">`.
`form`	`string \| undefined`	—	`form` attribute of the hidden file input.
`id`	`string \| undefined`	—	Same as the web id property for setting a uid on an element
`inputContainer`	`((children: ReactNode) => ReactNode) \| undefined`	—
`inputSize`	`string \| undefined`	—	Host size attribute for the input element
`inputWrapperOrder`	`InputWrapperOrderItem[] \| undefined`	—
`label`	`ReactNode`	—
`labelElement`	`"div" \| "label" \| undefined`	—
`labelProps`	`InputLabelProps \| undefined`	—
`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`	—	Displays loading indicator in the left or right section
`loadingPosition`	`"left" \| "right" \| undefined`	`"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.
`multiple`	`boolean \| undefined`	`false`	Allow picking more than one file.
`name`	`string \| undefined`	—	`name` attribute of the hidden file input.
`onChange`	`((payload: FileInputValue) => void) \| undefined`	—	Called when the value changes. With `multiple`, the payload is `File[]`; otherwise `File \| null`. NOTE (pragmatic divergence): Mantine's `FileInput` is generic over `Multiple` so the payload narrows at the type level. The kit fixes the payload to the `File \| File[] \| null` union (the same approach as the rest of the input family) to keep the component cast-free and strictly typed.
`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.
`pattern`	`string \| undefined`	—
`placeholder`	`ReactNode`	`Pick a file`	Placeholder shown when no file is picked.
`radius` system	`string \| number \| undefined`	—	Key of theme radius or a valid CSS value to set border-radius
`readOnly`	`boolean \| undefined`	`false`	If set, the value cannot be changed (the picker is disabled).
`required`	`boolean \| undefined`	—
`resetRef`	`Ref<() => void> \| undefined`	—	Ref populated with a function that clears the picked value.
`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
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`InputSize \| undefined` xs · sm · md · lg · xl	`sm`	Controls height, horizontal padding, radius and font size.
`spellCheck`	`boolean \| undefined`	—	Controls spell checking.
`step`	`string \| number \| undefined`	—
`styles` system	`SlotStyles<FileInputStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching part.
`textContentType`	`InputTextContentType \| undefined`	—	Text content type for iOS autofill. Use `autoComplete` where available.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`value`	`FileInputValue \| undefined`	—	Controlled value.
`valueComponent`	`FC<{ value: FileInputValue; }> \| undefined`	—	Renders the picked value. Defaults to a comma-joined list of file names.
`variant` system	`InputVariant \| undefined`	`"default"`	Visual variant
`withAria`	`boolean \| undefined`	`true`	Determines whether accessibility attributes should be added
`withAsterisk`	`boolean \| 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 FileInput can be styled through the styles prop. Explicit props on the component always win over slot styles.

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

Accessibility & DOM props (215)

Prop	Type
`about`	`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-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-dropeffect`	`"link" \| "none" \| "copy" \| "move" \| "execute" \| "popup" \| undefined`
`aria-errormessage`	`string \| undefined`
`aria-flowto`	`string \| undefined`
`aria-grabbed`	`(boolean \| "true" \| "false") \| undefined`
`aria-haspopup`	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "tree" \| "listbox" \| undefined`
`aria-invalid`	`boolean \| "true" \| "false" \| "grammar" \| "spelling" \| undefined`
`aria-keyshortcuts`	`string \| undefined`
`aria-level`	`number \| 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-setsize`	`number \| undefined`
`aria-sort`	`"none" \| "ascending" \| "descending" \| "other" \| undefined`
`autoSave`	`string \| undefined`
`checked`	`boolean \| undefined`
`contentEditable`	`"inherit" \| (boolean \| "true" \| "false") \| "plaintext-only" \| undefined`
`contextMenu`	`string \| undefined`
`datatype`	`string \| undefined`
`defaultChecked`	`boolean \| undefined`
`dir`	`string \| undefined`
`draggable`	`(boolean \| "true" \| "false") \| undefined`
`exportparts`	`string \| undefined`
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>) \| undefined`
`formEncType`	`string \| undefined`
`formMethod`	`string \| undefined`
`formNoValidate`	`boolean \| undefined`
`formTarget`	`string \| 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`
`onBeforeInputCapture`	`InputEventHandler<HTMLInputElement> \| undefined`
`onBeforeToggle`	`ToggleEventHandler<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`
`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`
`onContextMenuCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onCopyCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCutCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onDoubleClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onDragCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEndCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnterCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragExit`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragExitCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragLeaveCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragOverCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragStartCapture`	`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`
`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`
`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`
`onMouseDownCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseMoveCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOutCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOverCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseUpCapture`	`MouseEventHandler<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`
`onPointerOut`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOutCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOver`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOverCapture`	`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`
`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`
`onTouchCancelCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchMoveCapture`	`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`
`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<(HTMLElement & TamaguiElementMethods) \| View> \| undefined`
`resource`	`string \| undefined`
`results`	`number \| undefined`
`rev`	`string \| undefined`
`security`	`string \| undefined`
`slot`	`string \| undefined`
`src`	`string \| undefined`
`suppressContentEditableWarning`	`boolean \| undefined`
`suppressHydrationWarning`	`boolean \| undefined`
`title`	`string \| undefined`
`translate`	`"yes" \| "no" \| undefined`
`typeof`	`string \| undefined`
`unselectable`	`"off" \| "on" \| undefined`
`vocab`	`string \| undefined`

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