Search/

Form

Last modified:

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

Example of Form - default

<BcForm>
  <BcFormGroup>
    <BcLabel for='textin-hunter2'>
      Display name
    </BcLabel>
    <BcHint className='bc-hint' id='textin-hunter2-hint'>
      Only your display name is visible to researchers.
    </BcHint>
    <BcTextInput
      id='textin-hunter2'
      name='textin-hint-inside'
      type='text'
      value='hunter2'
    />
  </BcFormGroup>
  <div className='row'>
    <BcFormGroup className='col-lg-6'>
      <BcLabel for='textin'>
        Account email address
      </BcLabel>
      <BcTextInput
        id='textin'
        name='textin'
        placeholder='foo@bar.com'
        type='email'
      />
    </BcFormGroup>
  </div>
  <BcFormGroup className='col-lg-6'>
    <BcLabel for='textin-password'>
      Password
    </BcLabel>
    <BcTextInput
      id='textin-password'
      name='textin-password'
      type='password'
      value='super secret password'
    />
  </BcFormGroup>
</BcForm>

React documentation

Last modified:

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: