Form Patterns
Best practices and patterns for building forms with the Sourceful design system.
Basic Form Layout
Forms should use consistent spacing and clear labels. Use space-y-4 or space-y-6 between form groups.
Validation States
Show validation errors inline below the input. Use red borders and error text for invalid fields.
Form in Card
Wrap forms in Cards for visual separation. Use CardFooter for action buttons.
Device Settings
Configure your device preferences.
Receive alerts
Form with Multiple Input Types
Complex forms may combine various input types. Group related fields together.
Form Feedback
Provide clear feedback after form submission using Alert components.
Your settings have been saved successfully.
There was an error saving your settings. Please try again.
Slider Controls
Use sliders for numeric ranges. Always show the current value.
Best Practices
- Always use Labels with form controls for accessibility
- Show validation errors inline, below the relevant input
- Use helper text to provide context (max characters, format hints)
- Group related fields together with headings
- Place primary action buttons on the right, cancel on the left
- Disable submit buttons during form submission
- Provide clear success/error feedback after submission
- Use appropriate input types (email, tel, number) for better mobile UX
- Consider form field order and tab navigation
- Keep forms as short as possible - only ask for required information