# Field (/forms/field)





<ComponentPreview name="field-demo" description="Complete form example with field components." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/field
```

## Usage [#usage]

```tsx
import { Form } from "react-aria-components/Form"

import {
  Description,
  FieldError,
  Fieldset,
  Label,
  Legend,
} from "@/components/ui/preskok-ui/field"
import { Input } from "@/components/ui/preskok-ui/input"
import { TextField } from "@/components/ui/preskok-ui/text-field"

export function Example() {
  return (
    <Form>
      <Fieldset>
        <Legend>Profile information</Legend>
        <TextField isRequired name="email">
          <Label>Email</Label>
          <Input type="email" />
          <Description>We will never share your email.</Description>
          <FieldError />
        </TextField>
      </Fieldset>
    </Form>
  )
}
```

## Components [#components]

* **Label** - Form field label
* **Description** - Helper text for fields
* **FieldError** - Error message display
* **Fieldset** - Groups related form fields
* **Legend** - Title for fieldset groups

## Note [#note]

The `Input` component has been moved to a separate component. See the [Input](/forms/input) documentation for usage.