Form Field v0.3.4 · @behivetech

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.

Usage

1import { FormField } from '@behivetech/forms.form-field';
2import { Checkbox } from '@behivetech/atoms.checkbox';
3
4<FormField label="Accept terms" htmlFor="terms" required>
5  <Checkbox id="terms" />
6</FormField>
7
8<FormField label="Email" htmlFor="email" hint="We'll never share this">
9  <input id="email" type="email" />
10</FormField>
11
12<FormField label="Email" htmlFor="email" error="A valid email is required">
13  <input id="email" type="email" />
14</FormField>

hint is hidden whenever error is present. If label, hint, and error are all omitted, FormField renders as a plain wrapper around children.

Known limitation: FormField doesn't automatically wire aria-describedby from the control to the hint/error text — pass it yourself if you need that linkage today.

Examples

Open all 4 →

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 />);

Properties

`FormField` props

Prop	Type	Default	Description
`children*`	`ReactNode`	—	The form control this field wraps
`className`	`string`	—	Additional class names to merge with the component root element
`error`	`ReactNode`	—	Error message; also visually marks the field as invalid
`hint`	`ReactNode`	—	Supporting hint text; hidden while `error` is present
`htmlFor`	`string`	—	Associates the label with the control — pass the same id you give the control
`label`	`ReactNode`	—	Field label
`required`	`boolean`	—	Shows a required marker next to the label

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

Usage

Examples

Properties

FormField props

`FormField` props