Field

The canonical form layout: FieldGroup + Field with labels, descriptions, and errors.

Group

<FieldGroup>
  <Field>
    <FieldLabel htmlFor="name">Studio name</FieldLabel>
    <Input id="name" defaultValue="Buena Labs" />
    <FieldDescription>Shown on your public profile.</FieldDescription>
  </Field>
  <FieldSeparator />
  <Field data-invalid>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" aria-invalid />
    <FieldError>Enter a valid email address.</FieldError>
  </Field>
</FieldGroup>

The canonical form layout: FieldGroup + Field, with data-invalid on the field and aria-invalid on the control. For validation wiring see Form.

Field types

Enable coding ligatures

<FieldGroup>
  <Field>
    <FieldLabel htmlFor="notes">Release notes</FieldLabel>
    <Textarea id="notes" placeholder="What changed in this build?" />
    <FieldDescription>Plain text with mrkdwn support.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel htmlFor="weight">Default weight</FieldLabel>
    <select id="weight">…</select>
  </Field>
  <Field orientation="horizontal">
    <Checkbox id="ligatures" defaultChecked />
    <FieldLabel htmlFor="ligatures">Enable coding ligatures</FieldLabel>
  </Field>
  <Field>
    <FieldLabel>Line numbers</FieldLabel>
    <RadioGroup defaultValue="on">…</RadioGroup>
  </Field>
  <Field>
    <FieldLabel>Preview width</FieldLabel>
    <Slider defaultValue={[560]} min={320} max={960} step={20} />
  </Field>
</FieldGroup>

Field wraps any control — textarea, native select, checkbox, radio, slider — with the same label and description anatomy.

Fieldset

Publishing

Choose what ships with each note.

Post to the public changelog

Email subscribers

Cross-post to social

Switch

Coding ligatures

Render -> and != as glyphs.

<Field orientation="horizontal">
  <FieldContent>
    <FieldLabel htmlFor="ligatures">Coding ligatures</FieldLabel>
    <FieldDescription>Render -> and != as glyphs.</FieldDescription>
  </FieldContent>
  <Switch id="ligatures" defaultChecked />
</Field>

Choice cards

Publish target

Pick where this build goes.

Stable channel

Ships to every reader.

Beta channel

Early access, opt-in only.

<FieldSet>
  <FieldLegend>Publish target</FieldLegend>
  <RadioGroup defaultValue="stable">
    <FieldLabel htmlFor="stable">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Stable</FieldTitle>
          <FieldDescription>Ships to everyone.</FieldDescription>
        </FieldContent>
        <RadioGroupItem value="stable" id="stable" />
      </Field>
    </FieldLabel>
  </RadioGroup>
</FieldSet>

Responsive layout

orientation="responsive" stacks label over control on narrow containers and switches to a horizontal row once the FieldGroup reaches its @md container breakpoint — no media query, it reads the parent's width.

Markdown for agents: /design/field.md · spec: /design.md