Field

Usage

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@zynactra/ui/field"

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input id="username" autoComplete="off" aria-invalid />
      <FieldError>Choose another username.</FieldError>
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Examples

Invalid

data-invalid on the Field styles the label and help; aria-invalid on the control styles the input and tells screen readers. Point aria-describedby at whichever message is showing.

Required

Mark required fields with an asterisk and set required on the control. The asterisk is aria-hidden, since required already tells assistive tech.

Invite a teammate

Fields marked * are required.

Read-only and disabled

Read-only for values people need to see and copy but can't change: IDs, keys, generated URLs. Disabled for settings that can't be changed right now, with the reason underneath.

Guidelines

Label above, help below. An error replaces the help text.
Group related fields with FieldSet and FieldLegend.
Mark whichever is fewer: required fields with *, or optional ones with "(optional)". Never both in one form, and say what the mark means at the top.
Disabled fields can't be focused, so screen readers may skip them. Say why a field is disabled in its description, and never disable something people need to copy: make it read-only.