The provided Form
component is a wrapper around an HTML <form /> element. It provides form width styling and accessibility features when using form controls within.
When to use:
Form fields are essential to any website or web application. Unique id
's' will be auto-generated for the form fields and labels for
attribute, unless manually specified.
Edit the code below to see your changes live!
<Form><FormGroup><Inputdescription="Please provide a valid email address."label="Email"placeholder="Email address"requiredtype="email"/></FormGroup><FormGroup><Input label="Password" placeholder="Password" required type="password" /></FormGroup><Box marginTop="xxLarge"><Button type="submit">Sign in</Button></Box></Form>
Supports all native <form />
element attributes.
Prop name | Type | Default | Description |
---|---|---|---|
fullWidth | boolean | false | Sets the form width to 100% |
Props ending with * are required
Margin Props
Do |
---|
Use max-width form for most scenarios. fullWidth prop should be used non-traditional forms. |
Use type="submit" on the button you want as your submit button (HTML defaults the first button as the submit action) |
Validate form fields before the user submits the form. |
Don't |
---|
Use forms for immediate actions (i.e. toggling a setting) |