Form field

The Form Field component allows you to align certain elements of the form (checkbox or radio for example) with a label.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/form-field/styles";

HTML structure

This is one example with checkbox element associated with a label.

html
<div class="bdc-form-field">
    <div class="bdc-checkbox">
        <input class="bdc-checkbox__input" id="checkbox" type="checkbox" >

        <div class="bdc-checkbox__control">
            <i class="bdc-icon bdc-checkbox__checkmark fa-check fas"></i>
        </div>
    </div>

    <label class="bdc-label" for="checkbox">Checkbox</label>
</div>

Style customization

CSS classes

CSS ClassDescription
bdc-form-fieldMandatory.