Field

Wires label, control, helper text, and errors with shared ids and ARIA attributes.

<Field invalid error="Enter a valid email.">
  <FieldLabel required>Email</FieldLabel>
  <FieldControl>
    <Input placeholder="you@studio.dev" />
  </FieldControl>
  <FieldDescription>Helper text</FieldDescription>
  <FieldError />
</Field>

CLI install

npx doodleui-react add field

Usage

import {
  Field,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldLabel,
  Input,
} from "doodleui-react";

<Field invalid error="Required">
  <FieldLabel required>Name</FieldLabel>
  <FieldControl>
    <Input placeholder="Ada Lovelace" />
  </FieldControl>
  <FieldDescription>Public display name.</FieldDescription>
  <FieldError />
</Field>

Props