Field

Compose one control with its label, help, validation, and required state.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Work emailUse your work address.Enter a valid email address.

Workspace details

Name

Notes

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add field

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Field label="Work email" description="Use your work address." error={error} required>
  <Input name="email" type="email" />
</Field>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`label`	`ReactNode`	`required`
`controlId`	`string`	`generated`
`description / error`	`ReactNode`	`—`
`required / hideLabel`	`boolean`	`false`
`Parts`	`FieldSet, FieldLegend`	`—`

Accessibility

Place one antiflex control inside Field. It inherits id, required, aria-describedby, and aria-invalid. An explicit native/antiflex child id is used by the label, including inside InputGroup; otherwise controlId or a generated id is used. Custom controls hidden behind your own components should share Field.controlId. Explicit aria-describedby is preserved. Use FieldSet and FieldLegend for related controls. Errors associate with the control; your form owns validation and announcement.