Cognition

Components

Field

A form field wrapper that pairs a label and a control with optional helper text or a validation message, all wired together for accessibility.

Field is a higher-order component. It composes a Label with a control (Input, Select, Textarea, and the like) and does not replace them. It links the label, the control id, and the message for assistive tech.

Preview

We only use this for account recovery.

Rendered with live Cognition tokens. Type in the field, no dark: classes.

Variants

<Field label="Full name"><Input /></Field>

We only use this for account recovery.

<Field label="Email" helperText="…">

Enter a valid email address.

<Field label="Email" error="…">
<Field label="Workspace name" required>

24 / 160 characters

<Field label="Bio" helperText="24 / 160 characters">
  <Textarea />
</Field>

Helper text, an error message, a required marker, and a character count shown in the helper slot. The error variant also marks the control invalid for assistive tech.

States

Default. Empty and at rest.

Focused. The control rings (shown statically).

Filled. Holds a value.

That email is already in use.

Error. Danger border and message.

Disabled. Dimmed, not editable.

Focus and validation read on the control; disabled dims the whole field and its label.

API

Prop
Type
Default
Description
label
string
undefined
The field label, wired to the control via htmlFor.
helperText
string
undefined
Supporting text shown below the control.
error
string
undefined
Validation message. Replaces helper text and marks the control invalid.
required
boolean
false
Adds the required indicator to the label.
disabled
boolean
false
Dims the field and disables the control.
id
string
auto
Wires the label htmlFor to the control id. Generated if omitted.

The control is passed as children. Field clones it to set the id, aria-invalid, and aria-describedby.

Don't and Do

Don't

Don't drop a raw Input into a form without a Field around it. An input with no associated label is invisible to screen readers and gives sighted readers nothing to scan. Wrap form controls in a Field so every one carries its label and messaging.

Do
<Field label="Email" helperText="We never share it." id="email">
  <Input type="email" />
</Field>

Use Field any time a control needs a label, helper text, or a validation message. It is the standard wrapper for form inputs in Cognition.

import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function EmailField() {
  return (
    <Field
      label="Email"
      helperText="We only use this for account recovery."
      id="email"
    >
      <Input type="email" placeholder="you@distyl.ai" />
    </Field>
  );
}