Inputs@knitui/components

Autocomplete

Free-text input with a suggestion dropdown. Suggestions filter as the user types; selecting one fills the input. Built on Combobox + InputBase. Accent follows the active Tamagui theme.

WebiOSAndroid8 style slots79 own props13 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeControls height, padding, radius and font size.

disabled

false

clearable

false

openOnFocusOpen dropdown when input is focused.

true

selectFirstOptionOnChangeHighlight the first matching suggestion after each keystroke.

false

autoSelectOnBlurCommit the highlighted suggestion when the input loses focus.

false

limitMaximum number of suggestions shown at once.

nothingFoundMessage

placeholder

label

description

error

Playground

<Autocomplete
  data={["React", "Vue", "Angular", "Svelte", "SolidJS", "Ember", "Preact"]}
  placeholder="Search frameworks…"
  size="sm"
  disabled={false}
  clearable={false}
  openOnFocus
/>

Examples

Sizes

All five sizes displayed side by side.

Loading example…

SizesSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — input is inert and visually muted.

Loading example…

DisabledSource Storybook

Read Only

Read-only — the value is shown and focusable but cannot be edited (distinct from disabled, no dimming).

Loading example…

Read OnlySource Storybook

Theme

Theme accent — uses Tamagui theme instead of a Mantine-style color prop.

Loading example…

ThemeSource Storybook

Clearable

Clearable — a clear button appears once the input has a value.

Loading example…

ClearableSource Storybook

With Label And Error

With a label, description and error message using InputBase adornments.

Loading example…

With Label And ErrorSource Storybook

Grouped

Grouped suggestions — data is provided as an array of { group, items } objects.

Loading example…

GroupedSource Storybook

Nothing Found

Shows a "nothing found" message when no suggestion matches the typed text.

Loading example…

Nothing FoundSource Storybook

Controlled

Controlled — value and onChange wired externally; selected value is shown below.

Loading example…

ControlledSource Storybook

Custom Render Option

Custom renderOption — each suggestion shows a star icon alongside the label.

Loading example…

Custom Render OptionSource Storybook

Styles

Per-slot styles targets individual parts — here the trigger field and dropdown surface.

Loading example…

StylesSource 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`	—	—
`autoSelectOnBlur`	`boolean \| undefined`	`false`	Commit the highlighted suggestion when the input loses focus.
`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.
`clearable`	`boolean \| undefined`	`false`	Show a clear button when the input has a value.
`clearButtonProps`	`Partial<ComboboxClearButtonProps> \| undefined`	—	Props forwarded to the internal clear `Combobox.ClearButton`.
`clearSectionMode`	`"default" \| "clear" \| "rightSection" \| "both" \| undefined`	`'both'`	How the clear button and right section coexist.
`comboboxProps`	`Partial<ComboboxProps> \| undefined`	—	Props forwarded to the underlying `Combobox`.
`component`	`InputHostTag \| undefined`	—	Override the host element tag (defaults to `input`/`textarea`).
`data`	`ComboboxData \| undefined`	—	Suggestions to render. Strings, `{ value, label, disabled }`, or groups.
`defaultDropdownOpened`	`boolean \| undefined`	—	Uncontrolled initial dropdown opened state.
`defaultValue`	`string \| undefined`	—	Uncontrolled initial input 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`	—
`dropdownOpened`	`boolean \| undefined`	—	Controlled dropdown opened state.
`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;…`	—	—
`filter`	`OptionsFilter \| undefined`	`a case-insensitive label substring match.`	Custom options filter.
`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
`limit`	`number \| undefined`	`Infinity`	Maximum number of suggestions shown at once.
`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`	—	—
`maxDropdownHeight`	`number \| undefined`	`250`	Max dropdown height in px before scrolling.
`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`	—	—
`nothingFoundMessage`	`ReactNode`	—	Message shown when no suggestion matches.
`onChange`	`((value: string) => void) \| undefined`	—	Called when the input value changes.
`onChangeText`	`((text: string) => void) \| undefined`	—	Fires on every change with just the string value.
`onClear`	`(() => void) \| undefined`	—	Called when the clear button is pressed.
`onDropdownClose`	`(() => void) \| undefined`	—	Called when the dropdown closes.
`onDropdownOpen`	`(() => void) \| undefined`	—	Called when the dropdown opens.
`onOptionSubmit`	`((value: string) => void) \| undefined`	—	Called when a suggestion is submitted.
`onSelectionChange`	`((event: InputSelectionChangePayload) => void) \| undefined`	—	Fires when the text selection changes.
`onSubmitEditing`	`((event: InputTextEventPayload) => void) \| undefined`	—	Fires when Enter/Return is pressed.
`openOnFocus`	`boolean \| undefined`	`true`	Open dropdown when input is focused.
`pattern`	`string \| undefined`	—	—
`placeholder`	`string \| undefined`	`Search frameworks…`	—
`pointer`	`boolean \| undefined`	—	Determines whether the input should have cursor: pointer style
`radius` system	`string \| number \| undefined`	—	Key of theme radius or a valid CSS value to set border-radius
`readOnly`	`boolean \| undefined`	—	—
`renderOption`	`ComboboxRenderOption \| undefined`	—	Custom suggestion content. Receives `{ option, checked }`.
`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")
`selectFirstOptionOnChange`	`boolean \| undefined`	`false`	Highlight the first matching suggestion after each keystroke.
`selection`	`{ start: number; end?: number; } \| undefined`	—	Selection range
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xs · sm · md · lg · xl	`'md'`	Controls height, padding, radius and font size.
`spellCheck`	`boolean \| undefined`	—	Controls spell checking.
`step`	`string \| number \| undefined`	—	—
`styles` system	`SlotStyles<AutocompleteStyles> \| 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
`type`	`string \| undefined`	—	—
`value`	`string \| undefined`	—	Controlled input value (the free text).
`variant` system	`InputVariant \| undefined`	`"default"`	Visual variant
`withAria`	`boolean \| undefined`	`true`	Determines whether accessibility attributes should be added
`withAsterisk`	`boolean \| undefined`	—	—
`withScrollArea`	`boolean \| undefined`	`true`	Wrap suggestions in a `ScrollArea.Autosize`.
`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 Autocomplete can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Targets
`clearButton`	Props for the clear button (`Autocomplete.ClearButton`).
`dropdown`	Props for the floating surface (`Autocomplete.Dropdown`).
`empty`	Props for the empty state (`Autocomplete.Empty`).
`group`	Props for a suggestion group (`Autocomplete.Group`).
`option`	Props for each suggestion row (`Autocomplete.Option`).
`options`	Props for the listbox body (`Autocomplete.Options`).
`root`	Props for the state-machine root (`Autocomplete.Root` → `<Combobox>`).
`trigger`	Props for the field trigger (`Autocomplete.Trigger` → `InputBase`).

Accessibility & DOM props (218)

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-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`
`capture`	`boolean \| "user" \| "environment" \| 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`
`form`	`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 502 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.