Inputs@knitui/components

Select

Select is a single-value dropdown built on Combobox + InputBase. It supports plain strings, { value, label, disabled } objects, and grouped data. Enable searchable to filter options by typing. The clearable prop adds a clear button when a value is selected. Keyboard navigation (Arrow/Enter/Escape) works on web.

WebiOSAndroid9 style slots91 own props14 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeControls height, padding, radius and font size.

disabled

false

searchableAllow filtering options by typing into the input.

false

clearableShow a clear button when a value is selected.

false

allowDeselectDeselect the current value by picking it again.

true

withCheckIconShow a check icon next to the selected option.

true

checkIconPosition

placeholder

nothingFoundMessage

label

description

error

Playground

<Select
  data={["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"]}
  placeholder="Pick a fruit"
  size="sm"
  disabled={false}
  searchable={false}
  clearable={false}
  allowDeselect
  withCheckIcon
/>

Examples

Sizes

All seven sizes shown side by side.

Loading example…

SizesSource Storybook

Shadows

Elevation shadow ladder applied via the inherited shadow prop.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — the input is non-interactive and visually muted.

Loading example…

DisabledSource Storybook

Read Only

Read-only — the selected value is visible but locked; the dropdown does not open.

Loading example…

Read OnlySource Storybook

Clearable

Clearable — shows a clear button when a value is selected.

Loading example…

ClearableSource Storybook

Searchable

Searchable — type to filter the option list in real time.

Loading example…

SearchableSource Storybook

Grouped

Grouped data — options organised under labelled group headings.

Loading example…

GroupedSource Storybook

With Disabled Option

Disabled option — one entry in the list is non-selectable.

Loading example…

With Disabled OptionSource Storybook

With Field Chrome

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

Loading example…

With Field ChromeSource Storybook

Controlled

Controlled — the selected value is owned by the parent component.

Loading example…

ControlledSource Storybook

Size Stack

All seven sizes stacked to compare metrics at a glance.

Loading example…

Size StackSource Storybook

Loading

Loading state — a spinner replaces the chevron; position via loadingPosition.

Loading example…

LoadingSource Storybook

Styles

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

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`allowDeselect`	`boolean \| undefined`	`true`	Deselect the current value by picking it again.
`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 option when the input loses focus.
`autosize`	`boolean \| undefined`	`false`	Grows with content on web (scrollHeight-based); tracks onContentSizeChange on native.
`checkIconPosition`	`"left" \| "right" \| undefined` left · right	`'left'`	Side the check icon renders on.
`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 a value is selected.
`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`).
`cursorColor`	`"unset" \| ColorTokens \| undefined`	—
`data`	`ComboboxData \| undefined`	—	Options to render. Strings, `{ value, label, disabled }`, or groups.
`defaultDropdownOpened`	`boolean \| undefined`	—	Uncontrolled initial dropdown opened state.
`defaultSearchValue`	`string \| undefined`	—	Uncontrolled initial search value.
`defaultValue`	`string \| null \| undefined`	—	Uncontrolled initial 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 options displayed.
`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 option matches / data is empty.
`onChange`	`((value: string \| null, option: ComboboxItem \| null) => void) \| undefined`	—	Called when the value changes with the value and its option (or `null`).
`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 an option is submitted (before value changes).
`onSearchChange`	`((value: string) => void) \| undefined`	—	Called when the search value changes.
`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 the dropdown when the input receives focus (requires `searchable`).
`pattern`	`string \| undefined`	—
`placeholder`	`string \| undefined`	`Pick a fruit`
`placeholderTextColor`	`"unset" \| ColorTokens \| undefined`	—
`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 option 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")
`searchable`	`boolean \| undefined`	`false`	Allow filtering options by typing into the input.
`searchValue`	`string \| undefined`	—	Controlled search value.
`selectFirstOptionOnChange`	`boolean \| undefined`	`false`	Highlight the first matching option after each search change.
`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	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Controls height, padding, radius and font size.
`spellCheck`	`boolean \| undefined`	—	Controls spell checking.
`step`	`string \| number \| undefined`	—
`styles` system	`SlotStyles<SelectStyles> \| 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`	—
`underlineColorAndroid`	`"unset" \| ColorTokens \| undefined`	—
`value`	`string \| null \| undefined`	—	Controlled selected value.
`variant` system	`InputVariant \| undefined`	`"default"`	Visual variant
`withAria`	`boolean \| undefined`	`true`	Determines whether accessibility attributes should be added
`withAsterisk`	`boolean \| undefined`	—
`withCheckIcon`	`boolean \| undefined`	`true`	Show a check icon next to the selected option.
`withScrollArea`	`boolean \| undefined`	`true`	Wrap options 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 Select can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`chevron`	`styles={{ chevron: { … } }}`
`clearButton`	`styles={{ clearButton: { … } }}`
`dropdown`	`styles={{ dropdown: { … } }}`
`empty`	`styles={{ empty: { … } }}`
`group`	`styles={{ group: { … } }}`
`option`	`styles={{ option: { … } }}`
`options`	`styles={{ options: { … } }}`
`root`	`styles={{ root: { … } }}`
`trigger`	`styles={{ trigger: { … } }}`

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 521 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.