Field

Loading...

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/field

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-merge tailwind-variants

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>

Component API

Description

The Description component renders helper text for a field.

PropTypeDefault
classNamestring-

FieldError

The FieldError component renders validation error text.

PropTypeDefault
classNamestring-

FieldGroup

The FieldGroup component groups field controls.

PropTypeDefault
classNamestring-

Fieldset

The Fieldset component groups related form fields.

PropTypeDefault
classNamestring-

Label

The Label component renders a field label.

PropTypeDefault
classNamestring-

Legend

The Legend component renders a fieldset legend.

PropTypeDefault
classNamestring-