arca-ui

Form

React Hook Form integration with Paper Cut elevation guidance.

Basic Usage

The form surface owns elevation (Level 2), while fields stay inset (Level 1).

Sign in

Used for sign-in and account notifications.

At least 8 characters.

Keep me signed in on this device.

Variants

Compact

Inline

States

Error styling is driven by field state and stays flat/inset.

Validation errors

Best Practices

Prefer muted labels in dense containers; keep actions flat when nested.

Settings panel

Used for sign-in and account notifications.

At least 8 characters.

Keep me signed in on this device.

Anti-patterns

Avoid stacking elevation (Card + elevated Input/Button).

❌ Too loud
✅ Correct

API Reference

Component
Notes
Form
Provider wrapper from React Hook Form.
FormField
Bridges RHF Controller into slots via context.
FormItem
Layout wrapper that provides stable id.
FormLabel
Built on Label (supports variant/size and optional required indicator).
FormControl
Wires aria attributes and error state to the underlying control.
FormDescription
Optional help text.
FormMessage
Validation message (renders only when present).