---
title: Compose a form
description: Combine field, input, and button primitives while keeping domain state in the application.
order: 30
toc:
  - id: create-the-form
    title: Create the form
  - id: validation
    title: Validation
  - id: styling
    title: Styling
---

## Create the form {#create-the-form}

```tsx
import { Button } from "@workspace/ui/components/button"
import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field"
import { Input } from "@workspace/ui/components/input"

;<form onSubmit={saveProfile}>
  <Field>
    <FieldLabel htmlFor="display-name">Display name</FieldLabel>
    <Input id="display-name" name="displayName" />
    <FieldError>{errors.displayName}</FieldError>
  </Field>
  <Button type="submit">Save profile</Button>
</form>
```

## Validation {#validation}

The UI package renders validation state but does not select a form library or schema. Connect native form data, React state, or a form framework at the application boundary.

## Styling {#styling}

Use component variants for supported semantic changes and `className` for local layout. Use `cn` from `@workspace/ui/lib/utils` when conditional classes or consumer overrides must be merged.