Checkbox

Experiment

Dependencies: typography

                    
import "@solutas/mgnl-elements-css/build/components/checkbox/checkbox.css"

disabled

Checkbox Disabled

                    
<div class="mgnl-checkbox">
    <input type="checkbox" disabled id="mgnl-checkbox-input" class="mgnl-checkbox__input" />
    <label for="mgnl-checkbox-input" class="mgnl-checkbox__icon"></label>
    <label for="mgnl-checkbox-input" class="mgnl-checkbox__label">Checkbox Disabled</label>
</div>

Default

                    
<div class="mgnl-checkbox">
    <input type="checkbox" id="mgnl-checkbox-input-default" class="mgnl-checkbox__input" />
    <label for="mgnl-checkbox-input-default" class="mgnl-checkbox__icon"></label>
</div>

checkbox with long label

Checkbox with very long Label if needed

                    
<div style="max-width:200px">
    <div class="mgnl-checkbox">
        <input type="checkbox" id="mgnl-checkbox-input-long" class="mgnl-checkbox__input" />
        <label for="mgnl-checkbox-input-long" class="mgnl-checkbox__icon"></label>
        <label for="mgnl-checkbox-input-long" class="mgnl-checkbox__label">Checkbox with very long Label if needed</label>
    </div>
</div>

Indeterminate

This is a hack to make the checkbox indeterminate using css. We prefer using javascript to set the indeterminate state. If you use the css class mgnl-checkbox__input--indeterminate on the input, then you have to remove it manually when the checkbox is checked or unchecked. Default behaviour is that the state from indeterminate is removed when the checkbox is checked (you will see the checkmark) and next state is unchecked (you will see the empty checkbox).

Checkbox

                    
<div class="mgnl-checkbox">
    <input type="checkbox" id="mgnl-checkbox-input-semi" class="mgnl-checkbox__input mgnl-checkbox__input--indeterminate " />
    <label for="mgnl-checkbox-input-semi" class="mgnl-checkbox__icon"></label>
    <label for="mgnl-checkbox-input-semi" class="mgnl-checkbox__label">Checkbox</label>
</div>

Use CSS Var

--mgnl-checkbox-md-checkmark-wrapper-padding

--mgnl-checkbox-md-typography-font-family

--mgnl-checkbox-md-typography-font-size

--mgnl-checkbox-md-typography-font-weight

--mgnl-checkbox-md-typography-letter-spacing

--mgnl-checkbox-md-typography-line-height

--mgnl-checkbox-md-label-padding

--mgnl-checkbox-md-color-label-default

--mgnl-checkbox-md-color-label-hover

--mgnl-checkbox-md-border-radius

--mgnl-checkbox-unchecked-border-default

--mgnl-checkbox-md-gap

--mgnl-checkbox-unchecked-color-fill-default

--mgnl-animation-duration-50

--mgnl-animation-timing-50

--mgnl-checkbox-md-icon-size

--mgnl-uncheckbox-checked-color-fill-hover

--mgnl-checkbox-unchecked-border-hover

--mgnl-checkbox-unchecked-border-focus

--mgnl-switch-off-focus-outline-focus

--mgnl-checkbox-checked-border-focus

--mgnl-switch-on-focus-outline-focus

--mgnl-checkbox-checked-color-fill-default

--mgnl-checkbox-checked-border-default

--mgnl-checkbox-unchecked-border-disabled

--mgnl-checkbox-checked-color-fill-disabled

--mgnl-checkbox-checked-color-label-disabled

--mgnl-checkbox-checked-color-fill-hover