Form Element
The Form element is a container for collecting user input, managing submission states, and displaying success messages upon completion.
Live Preview
Fill out the form below and submit it to see the success state transition.
Form Preview
Specifications
Forms act as a logical wrapper for all your input components:
- Form Name: Assign a unique Name to identify submissions in your dashboard.
- Success State: Define a set of Success Elements that will replace the form content when a user submits successfully.
- Field Integration: Nest any Input Elements (text, select, radio, etc.) within the form's children.
- Action Buttons: Include a Submit button to trigger the form action or a Reset button to clear all fields.
- Styling: Customize the form's container with backgrounds, borders, and spacing to match your design system.
AI Guidance
How to prompt for Forms:
- Add a contact form with fields for name, email, and message.
- Create a newsletter signup form with a success message 'Subscribed!'.
- Insert a login form using the brand's primary button style.