Forms

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

CheckboxInput OTP

Basic

Field is a wrapper component that provides context for form elements like labels, descriptions, and error messages.

Loading...

Anatomy

import { Form } from "react-aria-components"
import { Button } from "@/components/ui/button"
import { Description, FieldError, Fieldset, Label, Legend } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Text } from "@/components/ui/text"
import { TextField } from "@/components/ui/text-field"
<Form>
  <Fieldset>
    <Legend/>
    <Text/>

    <TextField isRequired name="name">
      <Label/>
      <Input />
      <FieldError />
      <Description/>
    </TextField>

    <div data-slot="control">
      <Button type="submit">Register</Button>
    </div>
  </Fieldset>
</Form>
Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
Checkbox
Input OTP