Forms

Forms overview

All form elements are fully responsive with pure semantic HTML, enabling forms to scale gracefully across devices and viewports.

Inputs are width: 100%; by default and are the same size as the buttons to build consistent forms.

<form>
  <fieldset>
    <label>
      First name
      <input
        name="first_name"
        placeholder="First name"
      />
    </label>
    <label>
      Email
      <input
        type="email"
        name="email"
        placeholder="Email"
        autocomplete="email"
      />
    </label>
  </fieldset>

  <input
    type="submit"
    value="Subscribe"
  />
</form>

<input> can be inside or outside <label>.

<form>
  
  <!-- Input inside label -->
  <label>
    First name
    <input
      name="first_name"
      placeholder="First name"
    />
  </label>

  <!-- Input outside label -->
  <label for="email">Email</label>
  <input
    type="email"
    name="email"
    placeholder="Email"
    autocomplete="email"
  />

</form>

Helper text#

<small> below form elements are muted and act as helper texts.

We’ll never share your email with anyone else.
<input
  type="email"
  name="email"
  placeholder="Email"
  autoComplete="email"
  aria-label="Email"
  aria-describedby="email-helper"
/>
<small id="email-helper">
  We'll never share your email with anyone else.
</small>

Usage with grid#

You can use .grid inside a form. See Grid.

<form>
  <fieldset class="grid">
    <input 
      name="login"
      placeholder="Login"
      aria-label="Login"
      autocomplete="nickname"
    />
    <input
      type="password"
      name="password"
      placeholder="Password"
      aria-label="Password"
      autocomplete="current-password"
    />
    <input
      type="submit"
      value="Log in"
    />
  </fieldset>
</form>

Usage with group#

You can use role="group" with form elements. See Group.