Field

import { Field } from 'yarcl';

Field renders the label, helper text and error, and wires them to its control: the control gets an id, aria-describedby, aria-invalid and required automatically.

Full name *

As it appears on your ID.

Email

Enter a valid email address.

<Field label="Full name" description="As it appears on your ID." required>
  <Input placeholder="Ada Lovelace" />
</Field>

<Field label="Email" error={errors.email}>
  <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</Field>

Works with Input, Textarea, Select, Combobox, Checkbox and Switch. For radios, use RadioGroup.

Styling

• The label uses defaults.labelStyle; helper and error text use defaults.helperStyle.
• Errors, the invalid border and the required marker use defaults.errorColor.

Accessibility

• The label is a real <label> connected with htmlFor.
• Helper text and the error are announced as the control’s description.
• Don’t set the control’s id yourself; Field manages it.

Props

Prop	Type	Default	Description
children required	ReactNode		A single form control: Input, Textarea, Checkbox or Switch.
label required	ReactNode		Visible label for the control.
description	ReactNode		Helper text shown below the control.
error	ReactNode		Error message. When set, the control is marked invalid and styled with defaults.errorColor.
required	boolean		Marks the control as required and shows an indicator next to the label.