Form
Forms are essential components that enable users to provide data or interact with a system seamlessly. Ensuring clarity, accessibility, and ease of use are paramount for effective form design.
API Reference
Form Label
| Prop | Type | Default |
|---|---|---|
center | boolean | false |
Usage
General Guidelines
Do's
- Provide clear labels indicating the purpose of each form field.
- Use appropriate input types (text, number, date, etc.) to match the expected data format.
- Implement form validation to prevent errors and enhance user experience.
- Utilize placeholders or examples to guide users on the expected input format.
- Maintain consistency in styling and behavior across form fields.
- Design for accessibility, ensuring compatibility with screen readers and keyboard navigation.
- Implement responsive design to accommodate various screen sizes and devices.
Don'ts
- Don't overwhelm users with unnecessary form fields or options.
- Avoid vague or ambiguous labels that may confuse users.
- Don't rely solely on placeholder text without providing clear labels.
- Avoid disabling browser features like autofill without valid reasons.
- Don't sacrifice usability for aesthetic design elements.
- Avoid cluttered layouts that make it difficult for users to focus on form fields.
- Don't forget to provide informative error messages for invalid input.
Writing Guidelines
When to use
- When collecting user information such as name, email, address, etc.
- For search or filtering functionalities to narrow down results.
- When enabling users to input preferences or customize settings.
- In forms for submitting data or completing transactions.
- When capturing user feedback or comments.
When not to use
- When forms are unnecessary or irrelevant to the user's current task.
- For presenting static information that doesn't require user interaction.
- When alternative input methods such as selection menus or sliders are more appropriate.
- In situations where security concerns outweigh the benefits of user input.
Use Case
General Use Cases
- Gathering user information during account creation.
- Allowing users to search for specific content.
- Providing a means for users to send messages or inquiries.
- Allowing users to customize preferences and configurations.
Digital Health Use Cases
- Gathering patient information for medical records.
- Allowing patients to input and monitor their symptoms over time.
- Capturing medication dosage, frequency, and intake instructions.
- Allowing patients to book or cancel appointments online.
- Gathering data on patient health history, lifestyle, and risk factors.