Field

Label, description, and error scaffold for any form control — built on Ark UI's Field, so the accessible name, description, and invalid state wire themselves to whatever control you nest inside.

Field is the one place the form family wires accessible names and descriptions. Wrap a field-aware control — the kit's Input, Select, Combobox, and the rest — and Ark UI hands it the right id, aria-describedby, aria-invalid, disabled, and required through context. No per-control plumbing, no manual htmlFor.

import { Field } from '@42/ui-react/field';
import { Input } from '@42/ui-react/input';

<Field label="Email" description="We'll never share it.">
  <Input placeholder="login@student.42.fr" />
</Field>

Playground

Field

Dir

Presets

Props

label

description

error

required

disabled

size

placeholder

Code

<Field  label="Email"  description="We'll never share it."  size="md"  placeholder="login@student.42.fr"/>

Anatomy

The label binds to the control (click it to focus); the description renders below the control. When an error is present it takes that same slot — the error replaces the description.

We'll never share it.

Code

<Fieldlabel="Email"description="We'll never share it."><Input placeholder="login@student.42.fr" /></Field>

Required

required sets the semantic flag (forwarded to the control) and renders a red asterisk in the label — the two always travel together.

Code

<Field label="Login" required><Input placeholder="Pick your intra login" /></Field>

Error

Passing error flips the field to invalid: the message renders in the description's slot below the control (replacing the description while present), is associated via aria-describedby, and any field-aware control inside turns red automatically — you don't set invalid on the control yourself.

Enter a valid email address

Code

<Field label="Email" error="Enter a valid email address"><Input defaultValue="not-an-email" /></Field>

Sizes

size scales the field's own typography. Set the control's size to match — the family components forward a single size to both for you.

Small

Medium

Large

Code

<Field size="sm" label="Small"><Input size="sm" /></Field><Field size="md" label="Medium"><Input size="md" /></Field><Field size="lg" label="Large"><Input size="lg" /></Field>

Works with any field-aware control

Because the wiring rides on Ark's Field context, the same Field wraps every control in the family — Select, Combobox, MultiSelect, TagsInput, … — and each picks up the label, description, error, and state without extra props.

<Field label="Framework" description="Pick your stack" required>
  <Select data={['React', 'Vue', 'Svelte']} placeholder="Pick one" />
</Field>

<Field label="Tags" error="Add at least one">
  <TagsInput placeholder="Type and press Enter" />
</Field>

API

Prop

Type

Every other prop (including id and asChild) forwards to Ark UI's Field.Root.

Accessibility

The <label> is associated with the control automatically — clicking it focuses the control, and assistive tech announces the name.
description and error are linked through aria-describedby, so both are read out with the control. error additionally sets aria-invalid.
required, disabled, and readOnly propagate to field-aware controls through Ark's Field context — set them once on the Field.
RTL: the asterisk uses logical spacing (margin-inline-start) and the layout is a plain column, so everything mirrors correctly under dir="rtl".

Field

On this page