Field Component
Capsule-styled form fields with labels, descriptions, and error states using flat ink borders.
Basic Field
A simple field with label and input.
With Description
Fields can include helpful description text.
We will use this email to send you important notifications.
Soft Error State
A gentle error display with muted colors and helpful messaging.
Password should be at least 8 characters for better security.
Multiple Validation Errors
Display multiple validation errors at once for comprehensive feedback.
- Must be at least 8 characters
- Must contain at least one uppercase letter
- Must contain at least one number
Success State
Field with success validation indicator.
Email address is available!
Compact Form Style
For small forms in cards or modals, use subtle focus states with thinner borders.
Quick Contact
With Separator
Use separators to divide sections within a form.
or
API Reference
Field
Container for form field with label, input, and messages.
| Prop | Type | Default |
|---|---|---|
| orientation | "vertical" | "horizontal" | "responsive" | "vertical" |
| data-invalid | "true" | undefined | - |
FieldSeparator
Visual separator between fields with optional text.
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | - |