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: