Field

Field

<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: @helixui/core

import { Field } from '@helixui/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

Name	Type	Default	Description
...rest	HTMLAttributes<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

Component	Relation	Note
TextInput	wraps	Wrap any non-RAC control with Field for label/description/error.
Form	parent	Inside a Form.
Textarea	sibling
Checkbox	sibling
Switch	sibling
RadioGroup	sibling

Prompt examples

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

wrap a custom control

“add label/help to a custom select”

<Field label="Country" description="Used for tax purposes">
  <CustomSelect />
</Field>

Related

• TextInput
• Textarea
• Checkbox
• Switch
• RadioGroup