Components
TextField
{
function Controlled() {
const [value, setValue] = React.useState('');
return <TextField {...args} value={value} onChangeText={setValue} />;
}
return <Controlled />;
}Import
import { TextField } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
label | — | "Field label" | Floating label on Material, leading label on iOS. Not a placeholder — it stays visible once the field has a value. |
placeholder | — | "Placeholder text" | Hint shown while the field is empty. On Material it is hidden until the label has floated, so it never overlaps. |
errorMessage | — | — | Any non-empty string switches the field to its error styling and renders below it. Presence is the trigger; there is no separate hasError. |
editable | boolean | true | False renders a read-only field that still looks like a field. Use it for values a user can see but not change. |
materialVariant | outlined · filled | "outlined" | Material styling only; ignored on iOS, which has one field style. |
materialClearAccessibilityLabel | — | "Clear field value" | Accessible name for the Material clear button. Override when the field needs more context, such as “Clear company name”. |
leftView | — | — | Node inside the field, before the input — a currency prefix or icon. Add your own padding; the field adds none. |
rightView | — | — | Node inside the field, after the input. Replaces the built-in clear button when present. |
value | — | — | Makes the field controlled. Pair with onChangeText, or the field will not accept typing. |
Examples
Variants
<View className="gap-6">
<TextField label="Outlined" placeholder="Default variant" materialVariant="outlined" />
<TextField label="Filled" placeholder="Filled variant" materialVariant="filled" />
</View>With Error
<TextField
label="Reference"
defaultValue="12"
errorMessage="Must be 9 digits."
/>With Adornments
<TextField
{...args}
leftView={(
<View className="justify-center pl-3">
<Text color="tertiary">$</Text>
</View>
)}
rightView={(
<View className="justify-center pr-3">
<Text variant="footnote" color="tertiary" className="font-mono">
/month
</Text>
</View>
)}
/>Read Only
<TextField
label="Reference"
defaultValue="AB-0042"
editable={false}
/>