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"  autocomplete="given-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"  autocomplete="given-name"  />  </label>   <!-- Input outside label -->  <label for="email">Email</label>  <input  type="email"  id="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="username"  />  <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.

<form>  <fieldset role="group">  <input  type="email"  name="email"  placeholder="Enter your email"  autocomplete="email"  />  <input type="submit" value="Subscribe" />  </fieldset> </form>

Edit this page on GitHub