Skip to content
helix-ui

Field

Field

Category: Forms & inputs

<Field>
  <Field.Label htmlFor="email" required>
    Email
  </Field.Label>
  <input id="email" type="email" />
  <Field.Description>We'll never share it.</Field.Description>
  <Field.Error>Please enter a valid email.</Field.Error>
</Field>

Subcomponents

  • Field.Label — <label>. required prop adds a red asterisk.
  • Field.Description — <p> styled as helper text.
  • Field.Error — <p> with role="alert". Use only when the field is invalid.

Install: @helix-ui/core

import { Field } from '@helix-ui/core';

status: stable · since: 0.1.0

Tags: label, description, error, wrapper

Anatomy

Label                                            (required)
[control]
Help text describing the field
Error message

Layout

  • display — block
  • width — fill
  • height — content
  • intrinsicSize — vertical stack, hugs control height
  • stackable — true
  • fullBleed — false

Visual

A vertical stack: a label (font.weight.semibold), the wrapped control, an optional muted description, and an error message in danger tone when present.

Props

NameTypeDefaultDescription
...restHTMLAttributes<HTMLDivElement>—Native div attributes.

Slots

  • children — Field.Label, the control, Field.Description, Field.Error in any order

Tokens used

color.text.primary, color.text.secondary, color.text.action.danger, font.family.sans, font.size.sm, font.weight.medium, space.2

Accessibility

Notes

  • Field is presentational. Wire htmlFor/id between Label and the control yourself.
  • Field.Error has role="alert" so screen readers announce changes.

Composes with

ComponentRelationNote
TextInputwrapsWrap any non-RAC control with Field for label/description/error.
FormparentInside a Form.
Textareasibling
Checkboxsibling
Switchsibling
RadioGroupsibling

Prompt examples

These are the AI prompt → JSX mappings used by the helix-ui prompt DSL and integrations like Cursor / Claude Code.

wrap a custom control

“add label/help to a custom select”

<Field>
  <Field.Label htmlFor="country">Country</Field.Label>
  <CustomSelect id="country" />
  <Field.Description>Used for tax purposes</Field.Description>
</Field>