Component

Input

A text field with a focus halo instead of a border-color swap, an animated clear button, and a keypad mode that hints numeric/decimal input on mobile without fighting locale decimal separators.

Standalone

Bank

input.tsx

<NativeInput
  label="Bank"
  placeholder="Search banks…"
  value={value}
  onValueChange={setValue}
  onClear={() => setValue("")}
  clearable
/>

Example

A searchable provider field leads into a numeric identifier field, the two-step shape many linked-entity forms take.

Bank

Account number

input-example.tsx

<NativeInput
  label="Bank"
  placeholder="Search banks…"
  value={bankSearch}
  onValueChange={setBankSearch}
  onClear={() => setBankSearch("")}
  clearable={!!bankSearch}
/>
<NativeInput
  label="Account number"
  keypad="numeric"
  placeholder="1234567890"
  value={accountNumber}
  onValueChange={setAccountNumber}
/>

Capabilities

Prop	Type	Description
label	string	-
error	string	-
size	NativeInputSize	-
clearable	boolean	-
onClear	() => void	-
hint	string	-
endAccessory	ReactNode	Mutually exclusive with the × clear button - only one trailing slot is ever shown.
surface	NativeInputSurface	-
keypad	NativeInputKeypadMode	-