Field
Label, control, and hint or error together.
Installation
import { Field } from "~/components/ui/Field";Usage
We never share it.
<Field label="Email" hint="We never share it.">
<Input type="email" />
</Field>With error
Enter a valid email.
<Field label="Email" error="Enter a valid email.">
<Input aria-invalid />
</Field>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | The field label. |
| hint | ReactNode | - | Helper text under the control. |
| error | ReactNode | - | Error message (shown instead of the hint). |
Accessibility
- Renders a label element; pass htmlFor plus a matching id on the control to associate them.