Skip to content
Data Input

Field

Composable label, description, and error chrome.

React source Core source

Field

Composable label, description, and error chrome. The default export is a preset (label, description, errorMessage, htmlFor). Compose Field.Root, Field.Label, Field.Control, Field.Description, and Field.Error when you need native constraint messages or custom controls.

Do not pass label on TextField inside Field.Root — use Field parts around a control without FieldMeta, or use TextField’s label / description / errorMessage without Field parts.

Examples

Default

Any input composes the shared field chrome.
Demo.tsxtsx
import { Field } from '@var-ui/react';

<Field
  label="Custom control"
  description="Any input composes the shared field chrome."
  htmlFor="custom-range"
>
  <input id="custom-range" type="range" />
</Field>

Parts

In USD
Demo.tsxtsx
import { Button, Field } from '@var-ui/react';

<form
  onSubmit={(event) => {
    event.preventDefault();
  }}
>
  <Field.Root name="amount">
    <Field.Label>Amount</Field.Label>
    <Field.Control>
      <input name="amount" required />
    </Field.Control>
    <Field.Description>In USD</Field.Description>
    <Field.Error />
  </Field.Root>
  <Button type="submit">Save</Button>
</form>

Validity attributes

Field.Root sets these attributes for CSS:

AttributeWhen
data-invalidThe field is invalid (controlled invalid, native constraint, error content, or a form error).
data-validTouched or dirty, and not invalid.
data-dirtyThe value differs from the default.
data-touchedThe control has been blurred at least once.
data-filledThe control has a non-empty value (checkbox/radio: checked).
data-disabledThe control is disabled.

invalid is controlled when passed. If omitted, it is derived from native validity, Field.Error content, or a matching Form errors entry. Field.Error forceMount only keeps the error slot in the layout; it does not mark the field invalid.

Props

Accessibility

Built on React Aria Components where applicable.