Field

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

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

pnpm

yarn

bun

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>