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: