Skip to main content

Forms

Form styles with accessible labels, inputs, and validation states.

Example form

We'll never share your email with anyone else.
Optional: A brief description of yourself. 
<form class="l-ui-form">
  <div class="l-ui-form__group">
    <label class="l-ui-label" for="name">
      Full name
      <span class="l-ui-form__required">*</span>
    </label>
    <input type="text" class="l-ui-form__field">
  </div>

  <div class="l-ui-form__group">
    <label class="l-ui-label" for="role">Role</label>
    <div class="l-ui-select-container">
      <select class="l-ui-select">
        <option value="">Select a role</option>
      </select>
    </div>
  </div>

  <div class="l-ui-form__actions">
    <button type="submit" class="l-ui-button l-ui-button--primary">
      Submit
    </button>
  </div>
</form>

Checkbox inputs

<div class="l-ui-checkbox-container">
  <input class="l-ui-checkbox" type="checkbox" id="opt" value="1">
  <label class="l-ui-checkbox-container__label" for="opt">Option</label>
</div>

Switch inputs

<label class="l-ui-switch">
  <input type="checkbox" class="l-ui-switch__input" role="switch">
  <span class="l-ui-switch__track"></span>
  Enable notifications
</label>

Radio inputs

<div class="l-ui-radio">
  <div class="l-ui-radio__item">
    <input type="radio" class="l-ui-radio__input">
    <label class="l-ui-radio__label">Option</label>
  </div>
</div>

Specialised input types

All native HTML5 input types use the same l-ui-form__field class. Date and datetime inputs use the browser's calendar picker, which follows the current light or dark theme.

<input type="email" class="l-ui-form__field">
<input type="number" class="l-ui-form__field" min="0" step="1">
<input type="password" class="l-ui-form__field">
<input type="url" class="l-ui-form__field">
<input type="tel" class="l-ui-form__field">
<input type="date" class="l-ui-form__field">
<input type="datetime-local" class="l-ui-form__field">

Action buttons

Use l-ui-form__actions to wrap submit and other action buttons. Buttons are right-aligned on desktop and full-width on mobile.

<div class="l-ui-form__actions">
  <button type="submit" class="l-ui-button l-ui-button--primary">
    Save
  </button>
</div>

CSS classes

Form CSS classes
Class Description
l-ui-form Form container
l-ui-form__group Field group with label and input
l-ui-form__group--large-gap Modifier for larger top margin (combine with l-ui-form__group)
l-ui-form__actions Right-aligned action buttons (full-width on mobile)
l-ui-label Form label
l-ui-form__field Text input or textarea
l-ui-select-container Wrapper for select (adds caret icon)
l-ui-select Select dropdown
l-ui-form__hint Help text below input
l-ui-form__required Required field indicator (*)
l-ui-form__errors Validation errors container
l-ui-form__errors-list List of error messages
l-ui-switch Switch wrapper label
l-ui-switch__input Hidden checkbox input (sr-only)
l-ui-switch__track Visible toggle track and thumb