Forms
Form elements collect user input. All inputs should have clear labels, helpful placeholders, and proper validation states.
Text Input
Standard text input for single-line text entry.
We'll never share your email.
Please enter a valid email address.
Input with Icon
Add icons to provide visual context for the expected input.
Select
Dropdown select for choosing from predefined options.
Textarea
Multi-line text input for longer content like messages or descriptions.
0/500 characters
Checkbox
Checkboxes allow users to select multiple options or toggle a single option.
Radio Buttons
Radio buttons allow users to select one option from a group.
Toggle Switch
Toggle switches for binary on/off settings.
Form Layout
Example of a complete form with proper spacing and grouping.
Usage Guidelines
Do
- Always include visible labels
- Use helpful placeholder text
- Show validation errors inline
- Group related fields together
- Mark required fields clearly
Don't
- Use placeholder as the only label
- Show errors after form submission only
- Use generic error messages
- Disable submit without explanation
- Auto-submit without user action