Form

Overview

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:

  • Any usage of a form control.

Implementation

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>
    <Input
      description="Please provide a valid email address."
      label="Email"
      placeholder="Email address"
      required
      type="email"
    />
  </FormGroup>
  <FormGroup>
    <Input label="Password" placeholder="Password" required type="password" />
  </FormGroup>
  <Box marginTop="xxLarge">
    <Button type="submit">Sign in</Button>
  </Box>
</Form>

Props

Supports all native <form /> element attributes.

Prop name
Type
Default
Description
fullWidthbooleanfalse

Sets the form width to 100%

Props ending with * are required

Inherited

Expand

Margin Props

Do's and Don'ts

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)