PatternLab (0.1.259)

# Checkbox

.c-checkbox

# Checked and Unchecked

Add the attribute checked

hide code 
<div class="h-flex h-flex-row">
<div class="h-width-50">
    <div class="c-checkbox">
        <input id="i2" type="checkbox" checked>
        <label class="c-label" for="i2">I'm checked</label>
    </div>
    <div class="c-checkbox">
        <input id="i1" type="checkbox">
        <label class="c-label" for="i1">I'm unchecked</label>
    </div>
</div>
<div class="h-width-50">
    <div class="c-checkbox">
        <input id="i99" type="checkbox" checked>
        <label class="c-label" for="i99">I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. </label>
    </div>
</div>
</div>

# Disabled Checkbox

Add the attribute disabled="disabled"

hide code 
<div class="c-checkbox h-block">
    <input id="i4" type="checkbox" disabled="disabled" checked>
    <label class="c-label" for="i4">I'm a bit disabled but checked</label>
</div>
<div class="c-checkbox h-block">
    <input id="i5" type="checkbox" disabled="disabled">
    <label class="c-label" for="i5">I'm only disabled</label>
</div>

# Small Checkbox

WARNING

The small checkbox should only be used in old plausi protocols.

.c-checkbox.-small

hide code 
<div class="c-checkbox -small">
    <input id="small-cb" type="checkbox" checked>
    <label class="c-label" for="small-cb">I'm a small checkbox</label>
</div>

# Large Checkbox

TIP

The large checkbox can be used in input-checkbox combinations, see Input-Groups.

.c-checkbox.-large

hide code 
<div class="c-checkbox -large">
    <input id="large-cb" type="checkbox" checked>
    <label class="c-label" for="large-cb">I'm a large checkbox</label>
</div>

# Horizontal Layout

.c-checkbox.h-inline

hide code 
<div class="c-checkbox h-inline">
    <input id="ci3" type="checkbox" name="fc3" checked>
    <label class="c-label" for="ci3">I'm in line</label>
</div>
<div class="c-checkbox h-inline">
    <input id="ci4" type="checkbox" name="fc4" checked>
    <label class="c-label" for="ci4">I'm in line</label>
</div>
<div class="c-checkbox h-inline">
    <input id="ci7" type="checkbox" name="fc7">
    <label class="c-label" for="ci7">I'm in line</label>
</div>

Centering an inline checkbox: Use the helper-class .h-inline

hide code 
<div class="h-type-align-center h-block">
    <div class="c-checkbox h-inline">
        <input id="ci10" type="checkbox">
        <label class="c-label" for="ci10">I'm totally centered</label>
    </div>
</div>

# Checkbox Group with Label

.c-float-container.-has-checkbox

hide code 
<div class="c-float-container -has-checkbox">
    <label class="c-label">Label</label>
    <div class="c-checkbox h-inline">
        <input id="fc10" type="checkbox" name="fc10">
        <label class="c-label" for="fc10">I'm in line</label>
    </div>
    <div class="c-checkbox h-inline">
        <input id="fc3" type="checkbox" name="fc3" checked>
        <label class="c-label" for="fc3">I'm in line</label>
    </div>
    <div class="c-checkbox h-inline">
        <input id="fc8" type="checkbox" name="fc8">
        <label class="c-label" for="fc8">I'm in line</label>
    </div>
</div>

← Divider →