Field

Label, description and error for one control, wired for screen readers.

import { Field, Input } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function FieldBasic() {
  return (
    <Preview stack={true}>
      <Field.Root>
        <Field.Label>Label</Field.Label>
        <Input.Root />
        <Field.Description>Description</Field.Description>
      </Field.Root>
    </Preview>
  );
}

Use one Field.Root for each control. Put the label above the control and the description below it.
An Input or Textarea without a field needs an aria-label.
Inside a List, use List.Field for the label and description.

Validation

import { Field, Input } from "@openperf/deft";
import { useState } from "react";

import { Preview } from "../../src/Preview";

export default function FieldValidation() {
  const [invalid, setInvalid] = useState(true);

  return (
    <Preview stack={true}>
      <Field.Root invalid={invalid}>
        <Field.Label>Label</Field.Label>
        <Input.Root
          defaultValue="120"
          max={100}
          min={0}
          onChange={(event) => {
            setInvalid(!event.currentTarget.validity.valid);
          }}
          type="number"
        />
        {!invalid && <Field.Description>Description</Field.Description>}
        <Field.Error match={invalid}>Enter a value from 0 to 100.</Field.Error>
      </Field.Root>
    </Preview>
  );
}

Set invalid on Field.Root from the field’s validation state. An invalid field puts a red ring around its Input.
Render the description only while the field is valid, so the error replaces it rather than stacking below it.
Error text says how to fix the value, not just that it is wrong.

Switch in label

import { Field, Switch } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function FieldSwitch() {
  return (
    <Preview stack={true}>
      <Field.Root>
        <Field.Label>
          <Switch.Root />
          Label
        </Field.Label>
      </Field.Root>
    </Preview>
  );
}

Put a Switch.Root inside Field.Label so the whole label toggles the setting.

API

PropType

invalid?boolean

On Root. Marks the control invalid.

Typeboolean

disabled?boolean

On Root. Disables the control and fades the label.

Typeboolean

Defaultfalse

match?boolean | keyof ValidityState

On Error. Shows the error when true or when the control has that validity state.

Typeboolean | keyof ValidityState

Parts: Root, Description, Error, Label, and Base UI’s Control, Validity and Item unchanged. Built on Base UI Field.