Search/

Form

Last modified:

Container class for `<form>` and wrapper classes for grouping form elements.

Example of Form - default

<div class='bc-form'>
    <div class='bc-form__group'>
      <label class='bc-label' for='textin-hunter2'>
        Display name
      </label>
      <span class='bc-hint' id='textin-hunter2-hint'>
        Only your display name is visible to researchers.
      </span>
      <input
        class='bc-text-input bc-text-input--block'
        id='textin-hunter2'
        name='textin-hint-inside'
        type='text'
        value='hunter2'
      />
    </div>
    <div class='row'>
      <div class='bc-form__group col-lg-6'>
        <label class='bc-label' for='textin'>
          Account email address
        </label>
        <input
          class='bc-text-input bc-text-input--block'
          id='textin'
          name='textin'
          placeholder='foo@bar.com'
          type='email'
        />
      </div>
    </div>
    <div class='bc-form__group col-lg-6'>
      <label class='bc-label' for='textin-password'>
        Password
      </label>
      <input
        class='bc-text-input bc-text-input--block'
        id='textin-password'
        name='textin-password'
        type='password'
        value='super secret password'
      />
    </div>
  </div>

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

Design

Last modified:

Accessibility

Last modified:

Rationale

Last modified:

Use on the <form> tag, or in proximity if not possible. Possible also to be chained with Fieldsets if wrapping them is not feasible.

This wrapper class primarily sets vertical inter-spacing between child form elements.

  • Use the .bc-form__group class to group labels, descriptive text and their form fields.
  • Use .bc-form__footer for final form actions (eg save, submit).

This wrapper class is compatible with the BS3 grid system.

See also

Last modified: