Component
Form field
A label-and-error wrapper around any input: a small caption above, an optional inline hint, and an animated error message with an icon below.
The primitive
Enter a valid email address
form field.tsx
<NativeFormField label="Email" required error={error}>
<NativeInput value={value} onValueChange={(e) => setValue(e.target.value)} />
</NativeFormField>Example
Stacked into an account-creation form, each field carrying its own caption and error state independently.
Enter a valid email address
form-field-example.tsx
<NativeFormField label="Full name" required>
<NativeInput value={name} onValueChange={onNameChange} />
</NativeFormField>
<NativeFormField label="Email" required error={emailError}>
<NativeInput value={email} onValueChange={onEmailChange} />
</NativeFormField>Capabilities
| Prop | Type | Description |
|---|---|---|
| labelrequired | string | — |
| error | string | — |
| hint | string | — |
| required | boolean | — |
| childrenrequired | React.ReactNode | — |
| className | string | — |