Form Check Provides checkboxes, radios and switches with validation support.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                form: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="form-check">
    <input id="input" type="checkbox" name="checkbox" class="form-check-input" />
    <label class="form-check-label" for="input"> Label Description </label>
</div>
NameDescription
.form-checkBase class of the wrapper of a checkbox, radio or switch
.form-check.form-check-smApplies small size to the checkbox or radio elements
.form-check.form-switchApplied when the check input should have the switch style
.form-check.form-switch.form-switch-smApplies small size to the switch element
.form-check > .form-check-inputBase class of the actual input element
.form-check > .form-check-input.is-validApplies the valid state style to the form element
.form-check > .form-check-input.is-invalidApplies the invalid state style to the form element
.form-check > .form-check-labelBase class of the check input label element
Customize variables at:/library/extend/components/_form.scss
Component's defaults:/library/components/form/_defaults.scss
NameDefault valueNote
$form-text-margin-top.25rem
$form-text-font-size$small-font-size
$form-text-font-stylenull
$form-text-font-weightnull
$form-text-color$text-muted
$form-label-margin-bottom.5rem
$form-label-font-sizenull
$form-label-font-stylenull
$form-label-font-weightnull
$form-label-colornull
$input-padding-y.532rem
$input-padding-x.75rem
$input-font-familynull
$input-font-size$font-size-base
$input-font-weight$font-weight-normal
$input-line-height1.5
$input-border-radius$border-radius
$input-border-width1px
$input-height-border$input-border-width * 2
$input-heightadd($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false))
$input-height-inneradd($input-line-height * 1em, $input-padding-y * 2)
$input-height-inner-halfadd($input-line-height * .5em, $input-padding-y)
$input-height-inner-quarteradd($input-line-height * .25em, $input-padding-y / 2)
$input-transitionborder-color .15s ease-in-out, box-shadow .15s ease-in-out
$input-icon-size22px;
$input-placeholder-colorproperty.get(form-input-placeholder-color)Requires @use "@library/sass/modules/property";
$input-padding-y-lg0.688rem
$input-padding-x-lg1rem
$input-font-size-lg$font-size-lg
$input-border-radius-lg$border-radius-lg
$input-height-lgadd($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false))
$input-icon-size-lg26px;
$input-padding-y-sm0.282rem
$input-padding-x-sm.75rem
$input-font-size-sm$font-size-sm
$input-border-radius-sm$border-radius-sm
$input-height-smadd($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false))
$input-icon-size-sm18px;
$input-padding-y-xsm0.125rem
$input-padding-x-xsm0.5rem
$input-font-size-xsm$font-size-xsm
$input-border-radius-xsm$border-radius-xsm
$input-height-xsmadd($input-line-height * 1em, add($input-padding-y-xsm * 2, $input-height-border, false))
$input-line-height-xsm1.5;
$input-icon-size-xsm12px;
$input-bgproperty.get(form-input-bg)Requires @use "@library/sass/modules/property";
$input-colorproperty.get(form-input-text-color)Requires @use "@library/sass/modules/property";
$input-border-colorproperty.get(form-input-border)Requires @use "@library/sass/modules/property";
$input-box-shadow0 0 0 0 transparent
$input-plaintext-color$input-color
$input-disabled-bgproperty.get(form-input-disabled-bg)Requires @use "@library/sass/modules/property";
$input-disabled-colorproperty.get(form-input-disabled-text-color)Requires @use "@library/sass/modules/property";
$input-disabled-border-colornull
$input-hover-bgproperty.get(form-input-hover-bg)Requires @use "@library/sass/modules/property";
$input-hover-border-colorproperty.get(form-input-hover-border)Requires @use "@library/sass/modules/property";
$input-hover-colorproperty.get(form-input-hover-text-color)Requires @use "@library/sass/modules/property";
$input-hover-box-shadowproperty.get(form-input-hover-box-shadow)Requires @use "@library/sass/modules/property";
$input-focus-bgproperty.get(form-input-focus-bg)Requires @use "@library/sass/modules/property";
$input-focus-border-colorproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$input-focus-colorproperty.get(form-input-focus-text-color)Requires @use "@library/sass/modules/property";
$input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$input-focus-width.25rem
$input-group-addon-padding-y$input-padding-y
$input-group-addon-padding-x$input-padding-x
$input-group-addon-font-weight$input-font-weight
$input-group-addon-colorproperty.get(form-input-group-text-color)Requires @use "@library/sass/modules/property";
$input-group-addon-border-colorproperty.get(form-input-group-text-border-color)Requires @use "@library/sass/modules/property";
$input-group-addon-subtle-colorproperty.get(form-input-group-text-subtle-color)Requires @use "@library/sass/modules/property";
$input-group-addon-subtle-border-colorproperty.get(form-input-group-text-subtle-border-color)Requires @use "@library/sass/modules/property";
$form-check-input-width1em
$form-check-min-height$font-size-base * $line-height-base
$form-check-padding-start$form-check-input-width + .5em
$form-check-margin-bottom.125rem
$form-check-label-colornull
$form-check-label-cursornull
$form-check-transitionbackground-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$form-check-input-active-filterbrightness(90%)
$form-check-input-bgtransparent
$form-check-input-border2px solid property.get(ui-base-color-6)Requires @use "@library/sass/modules/property";
$form-check-input-border-radius2px
$form-check-radio-border-radius50%
$form-check-input-hover-borderproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-focus-border$input-focus-border-color
$form-check-input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$form-check-input-checked-bg-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-checked-border-color$form-check-input-checked-bg-color
$form-check-input-checked-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62818 14.6338C7.21344 15.1221 6.54349 15.1221 6.12875 14.6338L2.31105 10.1393C1.89632 9.65102 1.89632 8.86229 2.31105 8.37402C2.72579 7.88576 3.39575 7.88576 3.81048 8.37402L6.87315 11.9797L14.1895 3.3662C14.6043 2.87793 15.2742 2.87793 15.6889 3.3662C16.1037 3.85446 16.1037 4.64319 15.6889 5.13146L7.62818 14.6338Z" fill="#{theme.get(default, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-input-checked-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62818 14.6338C7.21344 15.1221 6.54349 15.1221 6.12875 14.6338L2.31105 10.1393C1.89632 9.65102 1.89632 8.86229 2.31105 8.37402C2.72579 7.88576 3.39575 7.88576 3.81048 8.37402L6.87315 11.9797L14.1895 3.3662C14.6043 2.87793 15.2742 2.87793 15.6889 3.3662C16.1037 3.85446 16.1037 4.64319 15.6889 5.13146L7.62818 14.6338Z" fill="#{theme.get(alt, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-radio-checked-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z" fill="none" stroke="#{theme.get(default, true, main-background-color)}" stroke-width="3"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-radio-checked-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z" fill="none" stroke="#{theme.get(alt, true, main-background-color)}" stroke-width="3"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-input-indeterminate-bg-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-indeterminate-border-color$form-check-input-indeterminate-bg-color
$form-check-input-indeterminate-bg-imageurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{theme.get(default, true, main-background-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")Requires @use "@library/sass/modules/theme";
$form-check-input-indeterminate-bg-image-alturl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{theme.get(alt, true, main-background-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")Requires @use "@library/sass/modules/theme";
$form-check-input-disabled-opacity.5
$form-check-label-disabled-opacity$form-check-input-disabled-opacity
$form-check-btn-check-disabled-opacity.65
$form-switch-width2em
$form-switch-padding-start$form-switch-width + .5em
$form-switch-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="9" fill="#{theme.get(default, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-switch-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="9" fill="#{theme.get(alt, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-switch-border-radius$form-switch-width
$form-switch-focus-bg-image$form-switch-bg-image
$form-switch-focus-bg-image-alt$form-switch-bg-image-alt
$form-switch-checked-bg-image$form-switch-bg-image
$form-switch-checked-bg-image-alt$form-switch-bg-image-alt
$form-switch-checked-bg-positionright center
$form-check-inline-margin-end1rem
$form-select-padding-y$input-padding-y
$form-select-padding-x$input-padding-x
$form-select-font-family$input-font-family
$form-select-font-size$input-font-size
$form-select-font-weight$input-font-weight
$form-select-line-height$input-line-height
$form-select-color$input-color
$form-select-disabled-color$gray-600
$form-select-bg$input-bg
$form-select-disabled-bg$gray-200
$form-select-disabled-border-color$input-disabled-border-color
$form-select-bg-positionright $form-select-padding-x center
$form-select-indicator-colortheme.get(default, true, form-input-select-indicator-color)Requires @use "@library/sass/modules/theme";
$form-select-indicator-svgstring.replace($form-select-indicator-svg, '$opacity', 1);Requires @use "@library/sass/modules/string";
$form-select-indicatorurl("data:image/svg+xml,#{$form-select-indicator-svg}")
$form-select-feedback-icon-padding-endadd(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding)
$form-select-feedback-icon-positioncenter right ($form-select-padding-x + $form-select-indicator-padding)
$form-select-feedback-icon-size$input-height-inner-half $input-height-inner-half
$form-select-border-width$input-border-width
$form-select-border-color$input-border-color
$form-select-border-radius$border-radius
$form-select-box-shadow0 0 0 transparent
$form-select-focus-border-color$input-focus-border-color
$form-select-focus-width$input-focus-width
$form-select-focus-box-shadow0 0 0 $form-select-focus-width $input-btn-focus-color
$form-select-padding-y-sm$input-padding-y-sm
$form-select-padding-x-sm$input-padding-x-sm
$form-select-font-size-sm$input-font-size-sm
$form-select-padding-y-lg$input-padding-y-lg
$form-select-padding-x-lg$input-padding-x-lg
$form-select-font-size-lg$input-font-size-lg
$form-range-track-width100%
$form-range-track-height6px
$form-range-track-cursorpointer
$form-range-track-bgproperty.get(ui-base-color-5)Requires @use "@library/sass/modules/property";
$form-range-track-border-radius1rem
$form-range-track-box-shadow$box-shadow-inset
$form-range-thumb-width16px
$form-range-thumb-height$form-range-thumb-width
$form-range-thumb-bgproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$form-range-thumb-border0
$form-range-thumb-border-radius1rem
$form-range-thumb-box-shadow0 .1rem .25rem rgba($black, .1)
$form-range-thumb-focus-box-shadow$input-focus-box-shadow
$form-range-thumb-active-bgproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$form-range-thumb-disabled-bg$gray-500
$form-range-thumb-transitionbackground-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$form-file-button-color$input-color
$form-floating-heightadd(3.5rem, $input-height-border)
$form-floating-padding-x$input-padding-x
$form-floating-padding-y1rem
$form-floating-input-padding-t1.625rem
$form-floating-input-padding-b.625rem
$form-floating-label-opacity.65
$form-floating-label-transformscale(.85) translateY(-.5rem) translateX(.15rem)
$form-floating-transitionopacity .1s ease-in-out, transform .1s ease-in-out
$form-feedback-margin-top$form-text-margin-top
$form-feedback-font-size12px
$form-feedback-font-style$form-text-font-style
$form-feedback-valid-color$success
$form-feedback-invalid-color$danger
$form-feedback-icon-valid-colortheme.get(default, true, state-ok-color)Requires @use "@library/sass/modules/theme";
$form-feedback-icon-validurl('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z" fill="#{$form-feedback-icon-valid-color}"/></svg>')
$form-feedback-icon-invalid-colortheme.get(default, true, state-error-color)Requires @use "@library/sass/modules/theme";
$form-feedback-icon-invalidurl('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5C4.8525 1.5 1.5 4.8525 1.5 9C1.5 13.1475 4.8525 16.5 9 16.5C13.1475 16.5 16.5 13.1475 16.5 9C16.5 4.8525 13.1475 1.5 9 1.5ZM12.75 11.6925L11.6925 12.75L9 10.0575L6.3075 12.75L5.25 11.6925L7.9425 9L5.25 6.3075L6.3075 5.25L9 7.9425L11.6925 5.25L12.75 6.3075L10.0575 9L12.75 11.6925Z" fill="#{$form-feedback-icon-invalid-color}"/></svg>')

Make sure to read the Customize components and Understanding and using the design system guides.

{title}