DAVEv1.1

FormField

Composable wrapper that wires label, control, and hint together with consistent spacing, accessibility attributes, and error state — without imposing a specific form library.

Anatomy
<FormField id="email" error required>
  <FormLabel>Email</FormLabel>        {/* label, asterisk, error colour */}
  <FormControl>
    <Input />                         {/* receives id + aria attrs */}
  </FormControl>
  <FormHint>Invalid email.</FormHint> {/* error or helper text */}
</FormField>

<FormSection title="Profile" description="Visible to others.">
  <FormField>…</FormField>
  <FormField>…</FormField>
</FormSection>

Examples

We'll never share your email.

Error state

Please enter a valid email address.

Required field

Section layout

Personal details

Used for your profile and notifications.

0 / 200

Shown on your public profile.

Preferences

Receive updates about activity.

Props

FormField

id
string
Unique id wired to the label htmlFor and control id. Auto-generated if omitted.
error= false
boolean
Applies error colour to the label and hint, and sets aria-invalid on the control.
required= false
boolean
Adds a red asterisk to the FormLabel.
children*
ReactNode
FormLabel, FormControl, FormHint.
className
string
Additional classes on the wrapper.

FormLabel

Renders a <label> wired to the parent FormField id.

children*
ReactNode
Label text.
className
string
Additional classes.

FormControl

children*
ReactElement
A single form control (Input, Textarea, Select, etc.). Receives id, aria-invalid, and aria-describedby automatically.

FormHint

children*
ReactNode
Helper or error text. Colour follows the error state of the parent FormField.

FormSection

title
string
Section heading rendered above the fields.
description
string
Supporting text rendered below the title.
children*
ReactNode
FormField elements.
className
string
Additional classes.
PreviousButtonNextCalendar