Forms
Field
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.
Basic
Field is a wrapper component that provides context for form elements like labels, descriptions, and error messages.
Loading...
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
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>Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.