Checkboxes

<divclass="o-forms"><legendclass="o-forms__label">Default checkboxes</legend><divclass="o-forms__additional-info">Prompt text follows the ledgend if required.</div><divclass="o-forms__group"><inputtype="checkbox"name="checkbox"value="1"class="o-forms__checkbox"id="checkbox11"checked="checked"><labelfor="checkbox11"class="o-forms__label">Checkbox 1</label><inputtype="checkbox"name="checkbox"value="2"class="o-forms__checkbox"id="checkbox12"><labelfor="checkbox12"class="o-forms__label">Checkbox 2</label><inputtype="checkbox"name="checkbox"value="3"class="o-forms__checkbox"id="checkbox13"><labelfor="checkbox13"class="o-forms__label">Checkbox 3</label></div></div><fieldsetclass="o-forms"><legendclass="o-forms__label">Inline checkboxes</legend><divclass="o-forms__group o-forms__group--inline"><inputtype="checkbox"name="checkbox"value="1"class="o-forms__checkbox"id="checkbox61"checked="checked"><labelfor="checkbox61"class="o-forms__label">Checkbox 1</label><inputtype="checkbox"name="checkbox"value="2"class="o-forms__checkbox"id="checkbox62"><labelfor="checkbox62"class="o-forms__label">Checkbox 2</label><inputtype="checkbox"name="checkbox"value="3"class="o-forms__checkbox"id="checkbox63"><labelfor="checkbox63"class="o-forms__label">Checkbox 3</label></div></fieldset><divclass="o-forms"><labelfor="form-secret"class="o-forms__label">Right side control checkbox</label><divclass="o-forms__additional-info">Interface demo only, password hide/show functionality is not currently included in o-forms.</div><inputtype="password"id="form-secret"placeholder="secret password"class="o-forms__text"required><divclass="o-forms__group o-forms__group--inline"><inputtype="checkbox"name="checkbox"value="2"class="o-forms__checkbox o-forms__checkbox--right"id="controlCheckbox"><labelfor="controlCheckbox"class="o-forms__label">Show password</label></div></div><fieldsetclass="o-forms o-forms--error"><legendclass="o-forms__label">Error</legend><divclass="o-forms__group"><inputtype="checkbox"name="checkbox3"value="1"class="o-forms__checkbox"id="checkbox31"checked="checked"><labelfor="checkbox31"class="o-forms__label">Checkbox 1</label><inputtype="checkbox"name="checkbox3"value="2"class="o-forms__checkbox"id="checkbox32"><labelfor="checkbox32"class="o-forms__label">Checkbox 2</label></div><divclass="o-forms__errortext">Invalid entry</div></fieldset><fieldsetclass="o-forms"><legendclass="o-forms__label">Disabled</legend><divclass="o-forms__group"><inputtype="checkbox"name="checkbox2"value="1"class="o-forms__checkbox"id="checkbox21"checked="checked"disabled="disabled"><labelfor="checkbox21"class="o-forms__label">Checkbox 1</label><inputtype="checkbox"name="checkbox2"value="2"class="o-forms__checkbox"id="checkbox22"disabled="disabled"><labelfor="checkbox22"class="o-forms__label">Checkbox 2</label></div></fieldset><fieldsetclass="o-forms"><legendclass="o-forms__label">Checkbox with long text</legend><divclass="o-forms__group"><inputtype="checkbox"name="checkbox51"value="1"class="o-forms__checkbox"id="checkbox51"checked="checked"><labelfor="checkbox51"class="o-forms__label"><p>I confirm I have read and agree to the terms &amp; conditions, privacy policy and cookie policy*.</p><p>We will send you occasional emails to improve your experience of the Financial Times.</p></label><inputtype="checkbox"name="checkbox52"value="1"class="o-forms__checkbox"id="checkbox52"><labelfor="checkbox52"class="o-forms__label"><p>By submitting this form, you indicate your consent to also being contacted by the Financial Times by email. post or phone about our other products, services or special offers unless you untick this box. You can change your preferences anytime in the My Account section.</p></label></div></fieldset><fieldsetclass="o-forms o-forms--wide"><legendclass="o-forms__label">Checkbox with long text (wide)</legend><divclass="o-forms__group"><inputtype="checkbox"name="checkbox53"value="1"class="o-forms__checkbox"id="checkbox53"checked="checked"><labelfor="checkbox53"class="o-forms__label"><p>I confirm I have read and agree to the terms &amp; conditions, privacy policy and cookie policy*.</p></label></div></fieldset>

A checkbox which acts as a toggle

<strong>Usercase:</strong> This is a checkbox which looks like a toggle, useful as an on/off e.g. for settings.