F7Shipped
Forms
Form layout, validation, and field patterns for auth, generator inputs, library search, and agent settings. Compose with @charply/design primitives — use templates for auth UI.
Core building blocks
LabelInputTextareaSwitchButtonimport { Label, Input, Textarea, Button } from "@charply/design"
import { LoginFormTemplate } from "@charply/design/templates"Field layout
Enter a valid email address
| Pattern | Classes | |
|---|---|---|
| Single field | space-y-2 | Label + control gap |
| Form section | space-y-4 | Between field groups |
| Form page | space-y-6 | Auth forms, settings |
| Inline row | flex gap-2 items-end | Search + button toolbar |
Validation and errors
Use aria-invalid on fields, inline text for field errors, and auth message templates for form-level feedback.
Actions
- One primary submit per form — disable while loading with explicit label
- Secondary: outline or ghost — never compete with primary
- Auth: use
LoginFormTemplate/SignupFormTemplatefor layout
Guidelines
docs/design/foundation/forms.mdDo
- ✓Use `@charply/design/templates` for login and signup UI
- ✓Set `type="submit"` on primary form buttons
- ✓Preserve label–control association in every field
- ✓Show explicit error messages from API responses
Don't
- ✗Build parallel input styling in extension-only CSS
- ✗Use placeholder as the only label
- ✗Stack multiple primary buttons in one form
- ✗Block forms with icon-only actions that lack `aria-label`