Input

A composable native input with shared sizes and field associations.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Project name · sm

Project name · md

Project name · lg

Workspace ID

Archived project

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 input

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="Project name" required>
  <Input name="project" autoComplete="organization" />
</Field>

API reference

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

Prop	Type	Default
`size`	`sm \| md \| lg`	`md`
`type`	`Native input type`	`text`
`value / defaultValue`	`Native input value`	`—`

Accessibility

Use Field or Label to give the input a name. Field connects help/error text and required state. Native validation, autocomplete, form attributes, events, and the input ref remain available.