Field

import { Field } from '@yarcl/react';

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.

PasswordForgot password?

Contact your workspace administrator to reset your password.

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.

Content beside the label

Use labelEnd for a help action or link beside the label. It renders outside the <label>, so its text stays out of the control’s accessible name.

<Field label="Password" labelEnd={<Link href="/reset-password">Forgot password?</Link>}>
  <Input type="password" />
</Field>

Styling

• The label is a Label, so it uses defaults.labelStyle and components.Label; 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, such as Input, ColorPicker, Textarea, Checkbox, Switch or Slider.
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.
labelEnd	ReactNode		Content shown after the label but outside it, such as an info tooltip or a "Forgot password?" link. It doesn't become part of the control's accessible name.
required	boolean		Marks the control as required and shows an indicator next to the label.