38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
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.
|