Forms Checkbox
Checkbox

Checkboxes allow users to select multiple options from a list of options.

Default stacked group

Checkboxes can be displayed in five states:

                        
                         <div class="ds-form-group">
 <div class="ds-form-set-stacked">
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="html" />
        <label class="ds-checkbox-label" for="html">HTML</label>
    </div>
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="css" checked="" />
        <label class="ds-checkbox-label" for="css">CSS</label>
    </div>
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="javascript" />
        <label class="ds-checkbox-label" for="javascript">Javascript</label>
    </div>
 </div>
</div>
Inline
                    
                    <div class="ds-form-group">
 <div class="ds-form-set">
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="html" />
        <label class="ds-checkbox-label" for="html">HTML</label>
    </div>
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="css" checked="" />
        <label class="ds-checkbox-label" for="css">CSS</label>
    </div>
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="javascript" />
        <label class="ds-checkbox-label" for="javascript">Javascript</label>
    </div>
 </div>
</div>
Disabled Checked
                        
                        <div class="ds-form-group">
 <div class="ds-form-set">
    <div class="ds-form-checkbox-group">
     <input class="ds-checkbox" type="checkbox" id="html" disabled="true" checked="true" />
     <label class="ds-checkbox-label" for="html">HTML</label>
    </div>
 </div>
</div>
Disabled Unchecked
                        
                        <div class="ds-form-group">
 <div class="ds-form-set">
    <div class="ds-form-checkbox-group">
        <input class="ds-checkbox" type="checkbox" id="html" disabled="true"  />
        <label class="ds-checkbox-label" for="html">HTML</label>
    </div>
 </div>
</div>

Guidelines

  • Write labels in sentence case.
  • Keep labels short.