TextField

A complete text input. Label, hint, validation, and a comfortable focus state.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Project name

Choose a name your team will recognize.

Work email

Enter a valid email address.

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 text-field

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

Usage

React

<TextField
  label="Project name"
  value={name}
  onChange={(event) => setName(event.target.value)}
  description="Choose a name your team will recognize."
/>

API reference

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

Prop	Type	Default
`label`	`string`	`required`
`size`	`sm \| md \| lg`	`md`
`description / error`	`string`	`—`
`hideLabel`	`boolean`	`false`
`leading`	`ReactNode`	`—`

Accessibility

The label remains accessible when visually hidden. Errors associate with the input and set aria-invalid. Native input attributes and refs are forwarded.