Field
Form row: label + control + hint/error. The standard wrapper for every input in settings panes and wizards.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Label above the control. |
hint | ReactNode | — | Dim helper line under the control. Replaced by error when both are set. |
error | ReactNode | — | Error message shown under the control. Triggers the invalid state on nested inputs. |
required | boolean | — | Appends a red asterisk to the label. |
labelMeta | ReactNode | — | Right-aligned meta next to the label (e.g. remaining chars, 'optional'). |
htmlFor | string | — | Associates the label with a form control id. |
children | ReactNode | — | The form control rendered inside the field. |
Field extends HTMLAttributes<HTMLDivElement>.
Usage
Basic
With hint
Email address for account notifications.
With error
Please enter a valid email address.
Required indicator
With labelMeta
import { Field } from "@solarius/onset";
import type { FieldProps } from "@solarius/onset";
<Field label="Username" required>
<Input placeholder="Enter your username" />
</Field>
<Field label="Email" hint="Email address for account notifications.">
<Input placeholder="you@example.com" />
</Field>
<Field label="Password" error="Must be at least 8 characters.">
<Input placeholder="••••••••" />
</Field>