Form Component
Capsule-styled forms with React Hook Form integration and Zod validation.
Login Form
A simple login form with email, password, and remember me checkbox.
Settings Form
A settings form with toggle switches and select dropdown.
Payment Form
A checkout form with credit card fields and validation.
Contact Form
A contact form with textarea for longer messages.
Profile Form
A more complex form with multiple fields and optional values.
Inline Form
A compact inline form layout, perfect for newsletter signups.
Classic Form (Default Inputs)
A form using the default bordered input style for a more defined look.
API Reference
Form
Wrapper component that provides form context from react-hook-form.
| Prop | Type | Default |
|---|---|---|
| ...form | UseFormReturn | Required |
FormField
Connects a form field to react-hook-form Controller.
| Prop | Type | Default |
|---|---|---|
| control | Control | Required |
| name | string | Required |
| render | (field) => ReactNode | Required |
Input
Styled input component with variant support.
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "subtle" | "default" |