Input
A single-line text field, with optional icons, buttons or text inside it and addons joined to it.JSX
<Input aria-label="Email" placeholder="you@example.com" />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Input, Label, VStack } from '@advui/core'
<VStack gap="2">
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="you@example.com" inputMode="email" />
</VStack>Examples
With label
Preview
Code
We’ll never share your email.
Sizes
Preview
Code
Invalid and disabled
Preview
Code
Username must be at least 3 characters.
Icons, text and buttons inside
A leading icon, a currency sign and a unit, and a copy button.Preview
Code
$
per month
Addons
Boxes joined to the field, in three sizes, one of them invalid.Preview
Code
https://
.com
kg
USD
API reference
Input
Accepts all Tamagui Input / TextInput props (value, onChangeText, secureTextEntry, …).| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | 32, 40 or 48px tall. |
invalid | boolean | false | Error styling + `aria-invalid`. |
disabled | boolean | false | Prevents editing. |
value | string | — | Controlled or uncontrolled value. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onChangeText | (text: string) => void | — | Called on every change (web and native). |
placeholder | string | — | Hint text — never a replacement for a label. |
leading | ReactNode | — | Inside the field, before the text: an icon or small button (centered in a square the height of the field) or short text such as "$". Pressing beside the text focuses the field. |
trailing | ReactNode | — | Inside the field, after the text: an icon, a small button such as copy or clear, or short text such as "kg". Pass `null` while it is empty rather than leaving it out, so the field is not re-created while typing. |
leadingAddon | ReactNode | — | A shaded box joined to the start of the field, such as "https://". |
trailingAddon | ReactNode | — | A shaded box joined to the end of the field, such as ".com" or "USD". |
Accessibility
- Always pair with a visible
Label(htmlFor↔id) or anaria-label. invalidsetsaria-invalid; describe the error in text next to the field (not just red).- Placeholder text meets 4.5:1 contrast only as a hint — it is not announced as the label.
- Text in a slot or addon ("https://", "kg") is read with the field: added to its description on web (
aria-describedby, after any help text) and to its hint on iOS and Android. Icons are decorative; buttons in a slot need anaria-label. - With slots, the focus ring and the invalid and disabled styles are drawn on the whole box, and pressing an icon or addon focuses the field.
| Key | Action |
|---|---|
| Tab | Moves focus into and out of the field. |
Responsive behavior
With slots, width, margin, flex and the box props (backgroundColor, border*) size and style the whole box; the text field takes the space left between the slots.
Platform notes
Web
Renders a native
<input>, so autofill and password managers work.iOS
Use
keyboardType, textContentType and autoComplete for the right keyboard and autofill.Android
Use
keyboardType and autoComplete; wrap forms in KeyboardAvoidingView on small screens.