Chekbox
Documentation
Default Checkbox
<form class="custom-drupal-form" accept-charset="UTF-8">
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox form-item-checkbox">
<input data-drupal-selector="edit-checkbox" aria-describedby="edit-checkbox--1--description" type="checkbox" id="edit-checkbox--1" name="checkbox" value="1" class="form-checkbox form-check-input">
<label class="form-check-label option form-label" for="edit-checkbox--1">Checkbox Default</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox form-item-checkbox">
<input data-drupal-selector="edit-checkbox" aria-describedby="edit-checkbox--2--description" type="checkbox" id="edit-checkbox--2" name="checkbox" value="2" checked="checked" class="form-checkbox form-check-input">
<label class="form-check-label option form-label" for="edit-checkbox--2">Checkbox Selected</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox form-item-checkbox form-disabled">
<input data-drupal-selector="edit-checkbox" aria-describedby="edit-checkbox--3--description" type="checkbox" id="edit-checkbox--3" name="checkbox" value="3" disabled class="form-checkbox form-check-input">
<label class="form-check-label option form-label" for="edit-checkbox--3">Checkbox Disabled</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox form-item-checkbox form-disabled">
<input data-drupal-selector="edit-checkbox" aria-describedby="edit-checkbox--4--description" type="checkbox" id="edit-checkbox--4" name="checkbox" value="4" disabled checked class="form-checkbox form-check-input">
<label class="form-check-label option form-label" for="edit-checkbox--4">Checkbox Selected Disabled</label>
</div>
</form>
Form Element: Checkbox
<form class="themeguide-checkbox-form" data-drupal-selector="themeguide-checkbox-form" action="/ar/themeguide/forms/checkbox" method="post" id="themeguide-checkbox-form" accept-charset="UTF-8">
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-default form-item-checkbox-default form-no-description mb-050 mt-050">
<input data-drupal-selector="edit-checkbox-default" type="checkbox" id="edit-checkbox-default" name="checkbox_default" value="1" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkbox-default">Checkbox Default</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-selected form-item-checkbox-selected form-no-description mb-050 mt-050">
<input data-drupal-selector="edit-checkbox-selected" type="checkbox" id="edit-checkbox-selected" name="checkbox_selected" value="1" checked="checked" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkbox-selected">Checkbox Selected</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-disabled form-item-checkbox-disabled form-no-description form-disabled mb-050 mt-050">
<input data-drupal-selector="edit-checkbox-disabled" disabled="disabled" type="checkbox" id="edit-checkbox-disabled" name="checkbox_disabled" value="1" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkbox-disabled">Checkbox Disabled</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-description form-item-checkbox-description mb-050 mt-050">
<input data-drupal-selector="edit-checkbox-description" aria-describedby="edit-checkbox-description--description" type="checkbox" id="edit-checkbox-description" name="checkbox_description" value="1" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkbox-description">Checkbox with description</label>
<small id="edit-checkbox-description--description" class="form-text text-muted description ml-0 d-block">
This is a description for this field
</small>
</div>
<input autocomplete="off" data-drupal-selector="form-jfndc43ubje20meyskdohhdg18x-uv6t3pqdpbcnvwa" type="hidden" name="form_build_id" value="form-jfndC43uBje20mEysKdOhHDg18x-Uv6t3PqdPBcNVWA" />
<input data-drupal-selector="edit-themeguide-checkbox-form" type="hidden" name="form_id" value="themeguide_checkbox_form" />
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Submit" class="button button--primary js-form-submit form-submit btn btn-primary" />
</div>
</form>
Form Element: Checkboxes
<form class="themeguide-checkboxes-form" data-drupal-selector="themeguide-checkboxes-form" action="/ar/themeguide/forms/checkbox" method="post" id="themeguide-checkboxes-form" accept-charset="UTF-8">
<fieldset data-drupal-selector="edit-checkboxes" aria-describedby="edit-checkboxes--wrapper--description" id="edit-checkboxes--wrapper" class="fieldgroup form-composite js-form-item form-item js-form-wrapper form-wrapper">
<legend>
<span class="fieldset-legend">Checkboxes</span>
</legend>
<div class="fieldset-wrapper">
<div id="edit-checkboxes" class="form-checkboxes"><div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkboxes-option1 form-item-checkboxes-option1 form-no-description mb-050 mt-050">
<input data-drupal-selector="edit-checkboxes-option1" aria-describedby="edit-checkboxes--description" type="checkbox" id="edit-checkboxes-option1" name="checkboxes[option1]" value="option1" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkboxes-option1">Option 1</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkboxes-option2 form-item-checkboxes-option2 form-no-description mb-050 mt-050">
<input data-drupal-selector="edit-checkboxes-option2" aria-describedby="edit-checkboxes--description" type="checkbox" id="edit-checkboxes-option2" name="checkboxes[option2]" value="option2" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkboxes-option2">Option 2</label>
</div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkboxes-option3 form-item-checkboxes-option3 form-no-description mb-050 mt-050">
<input data-drupal-selector="edit-checkboxes-option3" aria-describedby="edit-checkboxes--description" type="checkbox" id="edit-checkboxes-option3" name="checkboxes[option3]" value="option3" class="form-checkbox form-check-input" />
<label class="form-check-label option form-label" for="edit-checkboxes-option3">Option 3</label>
</div>
</div>
<div id="edit-checkboxes--wrapper--description" data-drupal-field-elements="description" class="form-text text-muted description">This is a description for this field</div>
</div>
</fieldset>
<input autocomplete="off" data-drupal-selector="form-iv-xfkk2nh4rau9rrkwy2if4yvee-sti3byzu9ht0yg" type="hidden" name="form_build_id" value="form-iv_xFkk2NH4raU9rRkwY2iF4yvEE-STI3bYZu9Ht0yg" />
<input data-drupal-selector="edit-themeguide-checkboxes-form" type="hidden" name="form_id" value="themeguide_checkboxes_form" />
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions--2"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit--2" name="op" value="Submit" class="button button--primary js-form-submit form-submit btn btn-primary" />
</div>
</form>