Form Field

v0.3.4
Stable

Dumb wrapper that provides label + hint/error + required-marker layout around any form control (`Checkbox`, `Input`, `Textarea`, `Select`, `Toggle`, ...) — the same job AntD's `Form.Item` does. The control itself owns none of this chrome; it just needs an `id` matching `htmlFor`.

pnpm add @behivetech/forms.form-field

You are viewing Form Field v0.3.4, snapshotted 2026-11-09. The latest is v0.3.5. Go to the latest →

Examples of v0.3.4 are shown as code; only the latest version runs live. Open the live examples →

Basic Form Field
1const BasicFormField = () => (
2  <FormField label="Email" htmlFor="email">
3    <input id="email" type="email" />
4  </FormField>
5);
6

7render(<BasicFormField />);
Required Form Field
1const RequiredFormField = () => (
2  <FormField label="Email" htmlFor="email-required" required>
3    <input id="email-required" type="email" />
4  </FormField>
5);
6

7render(<RequiredFormField />);
Form Field With Hint
1const FormFieldWithHint = () => (
2  <FormField label="Email" htmlFor="email-hint" hint="We'll never share this">
3    <input id="email-hint" type="email" />
4  </FormField>
5);
6

7render(<FormFieldWithHint />);
Form Field With Error
1const FormFieldWithError = () => (
2  <FormField
3    label="Email"
4    htmlFor="email-error"
5    error="A valid email is required"
6  >
7    <input id="email-error" type="email" />
8  </FormField>
9);
10

11render(<FormFieldWithError />);