Field

Pairs a label with the control it names.

Company name

import { Field } from "@smartacteam/ambient-web/field";
import { Input } from "@smartacteam/ambient-web/input";

export function FieldDemo() {
  return (
    <Field.Root className="w-64">
      <Field.Label>Company name</Field.Label>
      <Field.Control render={<Input.Text defaultValue="Lone Star Comfort" />} />
    </Field.Root>
  );
}

Usage

import { Field } from "@smartacteam/ambient-web/field";

<Field.Root>
  <Field.Label>Company name</Field.Label>
  <Field.Control render={<Input.Text />} />
</Field.Root>

Field.Root names its control from Field.Label and describes it from Field.Description, so no ids need passing by hand.

Why the label is not a `<label>`

A browser forwards :hover to the control a <label> labels, so a label associated the usual way puts its control into the hover state whenever the pointer crosses the label text — which can sit a column or more away from the control. Wrapping the control in the label does the same thing.

Field.Label renders a <span> and keeps the association through aria-labelledby, so hover stays where the pointer is. Clicking the label still reaches the control.

Examples

Description

Support email

Shown to homeowners on their receipts.

import { Field } from "@smartacteam/ambient-web/field";
import { Input } from "@smartacteam/ambient-web/input";

export function FieldHintDemo() {
  return (
    <Field.Root className="w-64">
      <Field.Label>Support email</Field.Label>
      <Field.Control render={<Input.Text type="email" />} />
      <Field.Description>
        Shown to homeowners on their receipts.
      </Field.Description>
    </Field.Root>
  );
}

Field

Usage

Why the label is not a <label>

Examples

Description

Why the label is not a `<label>`