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.
The primitive
input.tsx
<NativeInput
label="Bank"
placeholder="Search banks…"
value={value}
onValueChange={(e) => setValue(e.target.value)}
onClear={() => setValue("")}
clearable
/>Example
On the saved-payment-methods form, a searchable bank field leads into a numeric account-number field, the two-step shape every bank-linking flow takes.
input-example.tsx
<NativeInput
label="Bank"
placeholder="Search banks…"
value={bankSearch}
onValueChange={(e) => setBankSearch(e.target.value)}
onClear={() => setBankSearch("")}
clearable={!!bankSearch}
/>
<NativeInput
label="Account number"
keypad="numeric"
placeholder="1234567890"
value={accountNumber}
onValueChange={(e) => setAccountNumber(e.target.value)}
/>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 | — |