Checkboxes

Basic checkbox

Let users select one or more options by using the checkboxes component.

Basic checkbox example

Select all that apply.

Waste from animal carcasses

Waste from mines or quarries

Farm or agricultural waste

<fieldset class="ns-fieldset">
 <legend class="ns-fieldset__legend noBorder">
  <h3 class="ns-fieldset__heading">Basic checkbox example</h3>
 </legend>
 <div id="waste-hint" class="ns-hint">
  Select all that apply.
 </div>
 <div class="ns-checkboxes">
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="waste" name="waste" type="checkbox" value="carcasses">
    <label class="ns-label ns-checkboxes__label" for="waste">
     <span class="ns-label-span">Waste from animal carcasses</span>
    </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
    <label class="ns-label ns-checkboxes__label" for="waste-2">
     <span class="ns-label-span">Waste from mines or quarries</span>
    </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
    <label class="ns-label ns-checkboxes__label" for="waste-3">
     <span class="ns-label-span">Farm or agricultural waste</span>
    </label>
   </div>
  </div>
</fieldset>

Exemple de case à cocher

Cochez-la ou les cases appropriées.

Déchets de carcasses d'animaux

Déchets de mines ou carrières

Déchets agricoles

<fieldset class="ns-fieldset">
 <legend class="ns-fieldset__legend noBorder">
  <h3 class="ns-fieldset__heading">Exemple de case à cocher</h3>
 </legend>
 <div id="waste-hint" class="ns-hint">
  Cochez-la ou les cases appropriées.
 </div>
 <div class="ns-checkboxes">
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="waste" name="waste" type="checkbox" value="carcasses">
    <label class="ns-label ns-checkboxes__label" for="waste">
     <span class="ns-label-span">Déchets de carcasses d'animaux</span>
    </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
    <label class="ns-label ns-checkboxes__label" for="waste-2">
     <span class="ns-label-span">Déchets de mines ou carrières</span>
    </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
    <label class="ns-label ns-checkboxes__label" for="waste-3">
     <span class="ns-label-span">Déchets agricoles</span>
    </label>
   </div>
  </div>
</fieldset>

Checkbox items with hints

You can add hints to checkbox items to provide additional information about the options.

Checkbox items with hints example

If you have dual nationality, select all options that are relevant to you.

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

<fieldset class="ns-fieldset">
  <legend class="ns-fieldset__legend noBorder">
   <h3 class="ns-fieldset__heading">Checkbox items with hints example</h3>
  </legend>
  <div id="waste-hint" class="ns-hint">
   If you have dual nationality, select all options that are relevant to you.
  </div>
  <div class="ns-checkboxes">
   <div class="ns-checkboxes__item">
    <input class="ns-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british" aria-describedby="nationality-item-hint">
     <label class="ns-label ns-checkboxes__label" for="nationality">
      <span class="ns-label-span">British</span>
     </label>
     <div id="nationality-item-hint" class="ns-hint ns-checkboxes__hint">
      including English, Scottish, Welsh and Northern Irish
     </div>
    </div>
    <div class="ns-checkboxes__item">
     <input class="ns-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
      <label class="ns-label ns-checkboxes__label" for="nationality-2">
       <span class="ns-label-span">Irish</span>
      </label>
    </div>
    <div class="ns-checkboxes__item">
     <input class="ns-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
      <label class="ns-label ns-checkboxes__label" for="nationality-3">
       <span class="ns-label-span">Citizen of another country</span>
      </label>
    </div>
  </div>
</fieldset>

Exemple d'éléments de case à cocher avec des conseils

Si vous avez la double nationalité, sélectionnez toutes les options qui vous concernent.

Britanique

y compris l'anglais, l'écossais, le gallois et l'irlandais du Nord

Irish

Citoyen d'un autre pays

<fieldset class="ns-fieldset">
  <legend class="ns-fieldset__legend noBorder">
   <h3 class="ns-fieldset__heading">Exemple d'éléments de case à cocher avec des conseils</h3>
  </legend>
  <div id="waste-hint" class="ns-hint">
   Si vous avez la double nationalité, sélectionnez toutes les options qui vous concernent.
  </div>
  <div class="ns-checkboxes">
   <div class="ns-checkboxes__item">
    <input class="ns-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british" aria-describedby="nationality-item-hint">
     <label class="ns-label ns-checkboxes__label" for="nationality">
      <span class="ns-label-span">Britanique</span>
     </label>
     <div id="nationality-item-hint" class="ns-hint ns-checkboxes__hint">
      y compris l'anglais, l'écossais, le gallois et l'irlandais du Nord
     </div>
    </div>
    <div class="ns-checkboxes__item">
     <input class="ns-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
      <label class="ns-label ns-checkboxes__label" for="nationality-2">
       <span class="ns-label-span">Irlandais</span>
      </label>
    </div>
    <div class="ns-checkboxes__item">
     <input class="ns-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
      <label class="ns-label ns-checkboxes__label" for="nationality-3">
       <span class="ns-label-span">Citoyen d'un autre pays</span>
      </label>
    </div>
  </div>
</fieldset>

Conditionally revealing content

You can conditionally reveal content when the user selects a particular checkbox, so they only see content when it’s relevant to them.

For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.

Conditionally revealing content example

Select all options that are relevant to you.

Email address

Phone

Phone number

Text message

Cell phone number

<fieldset class="ns-fieldset">
 <legend class="ns-fieldset__legend noBorder">
  <h3 class="ns-fieldset__heading">Conditionally revealing content example</h3>
 </legend>
 <div id="waste-hint" class="ns-hint">
  Select all options that are relevant to you.
 </div>
 <div class="ns-checkboxes" data-module="ns-checkboxes">
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="contact" name="contact" type="checkbox" value="email" data-aria-controls="conditional-contact" checked="checked">
    <label class="ns-label ns-checkboxes__label" for="contact">
     <span class="ns-label-span">Email</span>
    </label>
  </div>
  <div class="ns-checkboxes__conditional" id="conditional-contact">
   <div class="ns-fieldset">
    <label class="ns-label" for="contact-by-email">Email address</label>
     <input class="ns-input ns-!-width-one-third" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false"></div>
   </div>
   <div class="ns-checkboxes__item">
    <input class="ns-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-contact-2">
     <label class="ns-label ns-checkboxes__label" for="contact-2">
      <span class="ns-label-span">Phone</span>
     </label>
   </div>
   <div class="ns-checkboxes__conditional ns-checkboxes__conditional--hidden" id="conditional-contact-2">
    <div class="ns-fieldset">
    <label class="ns-label" for="contact-by-phone">Phone number</label>
     <input class="ns-input ns-!-width-one-third" id="contact-by-phone" name="contact-by-phone" type="tel"></div>
    </div>
    <div class="ns-checkboxes__item">
     <input class="ns-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text message" data-aria-controls="conditional-contact-3">
      <label class="ns-label ns-checkboxes__label" for="contact-3">
       <span class="ns-label-span">Text message</span>
      </label>
    </div>
    <div class="ns-checkboxes__conditional ns-checkboxes__conditional--hidden" id="conditional-contact-3">
    <div class="ns-fieldset">
     <label class="ns-label" for="contact-by-text">Cell phone number</label>
      <input class="ns-input ns-!-width-one-third" id="contact-by-text" name="contact-by-text" type="tel"></div>
    </div>
   </div>
</fieldset>

Exemple de contenu révélateur conditionnel

Sélectionnez toutes les options qui vous concernent.

Courriel

Adresse électronique

Téléphone

Numéro de téléphone

Texto

Numéro de téléphone mobile

<fieldset class="ns-fieldset">
 <legend class="ns-fieldset__legend noBorder">
  <h3 class="ns-fieldset__heading">Exemple de contenu révélateur conditionnel</h3>
 </legend>
 <div id="waste-hint" class="ns-hint">
  Sélectionnez toutes les options qui vous concernent.
 </div>
 <div class="ns-checkboxes" data-module="ns-checkboxes">
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="contact" name="contact" type="checkbox" value="email" data-aria-controls="conditional-contact" checked="checked">
    <label class="ns-label ns-checkboxes__label" for="contact">
     <span class="ns-label-span">Courriel</span>
    </label>
  </div>
  <div class="ns-checkboxes__conditional" id="conditional-contact">
   <div class="ns-fieldset">
    <label class="ns-label" for="contact-by-email">Adresse électronique</label>
     <input class="ns-input ns-!-width-one-third" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false"></div>
   </div>
   <div class="ns-checkboxes__item">
    <input class="ns-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-contact-2">
     <label class="ns-label ns-checkboxes__label" for="contact-2">
      <span class="ns-label-span">Téléphone</span>
     </label>
   </div>
   <div class="ns-checkboxes__conditional ns-checkboxes__conditional--hidden" id="conditional-contact-2">
    <div class="ns-fieldset">
    <label class="ns-label" for="contact-by-phone">Numéro de téléphone</label>
     <input class="ns-input ns-!-width-one-third" id="contact-by-phone" name="contact-by-phone" type="tel"></div>
    </div>
    <div class="ns-checkboxes__item">
     <input class="ns-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text message" data-aria-controls="conditional-contact-3">
      <label class="ns-label ns-checkboxes__label" for="contact-3">
       <span class="ns-label-span">Texto</span>
      </label>
    </div>
    <div class="ns-checkboxes__conditional ns-checkboxes__conditional--hidden" id="conditional-contact-3">
    <div class="ns-fieldset">
     <label class="ns-label" for="contact-by-text">Numéro de téléphone mobile</label>
      <input class="ns-input ns-!-width-one-third" id="contact-by-text" name="contact-by-text" type="tel"></div>
    </div>
   </div>
</fieldset>

Smaller checkboxes

Use standard-sized checkboxes in nearly all cases. However, smaller versions work well on pages where it’s helpful to make them less visually prominent.

For example, on a page of search results, the primary user need is to see the results. Using smaller checkboxes lets users see and change search filters without distracting them from the main content.

Smaller checkboxes example

Department of Community Services

Department of Energy

Department of Labour, Skills and Immigration

Department of Education and Early Childhood Development

<fieldset class="ns-fieldset">
 <legend class="ns-fieldset__legend noBorder">
  <h3 class="ns-fieldset__heading">Smaller checkboxes example</h3>
 </legend>
 <div class="ns-checkboxes ns-checkboxes--small">
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation" name="organisation" type="checkbox" value="hmrc">
   <label class="ns-label ns-checkboxes__label" for="organisation">
    <span class="ns-label-span">Department of Community Services</span>
   </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation-2" name="organisation" type="checkbox" value="employment-tribunal">
   <label class="ns-label ns-checkboxes__label" for="organisation-2">
    <span class="ns-label-span">Department of Energy</span>
   </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation-3" name="organisation" type="checkbox" value="MOD">
    <label class="ns-label ns-checkboxes__label" for="organisation-3">
    <span class="ns-label-span">Department of Labour, Skills and Immigration</span>
   </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation-4" name="organisation" type="checkbox" value="DfT">
   <label class="ns-label ns-checkboxes__label" for="organisation-4">
    <span class="ns-label-span">Department of Education and Early Childhood Development</span>
   </label>
  </div>
 </div>
</fieldset>

Exemple de petites cases à cocher

Ministère des Services communautaires

Ministère de l’Énergie

Ministère de Travail, des Compétences et de l’Immigration

Ministère de l'Éducation et du Développement de la petite enfance

<fieldset class="ns-fieldset">
 <legend class="ns-fieldset__legend noBorder">
  <h3 class="ns-fieldset__heading">Exemple de petites cases à cocher</h3>
 </legend>
 <div class="ns-checkboxes ns-checkboxes--small">
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation" name="organisation" type="checkbox" value="hmrc">
   <label class="ns-label ns-checkboxes__label" for="organisation">
    <span class="ns-label-span">Ministère des Services communautaires</span>
   </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation-2" name="organisation" type="checkbox" value="employment-tribunal">
   <label class="ns-label ns-checkboxes__label" for="organisation-2">
    <span class="ns-label-span">Ministère de l’Énergie</span>
   </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation-3" name="organisation" type="checkbox" value="MOD">
    <label class="ns-label ns-checkboxes__label" for="organisation-3">
    <span class="ns-label-span">Ministère de Travail, des Compétences et de l’Immigration</span>
   </label>
  </div>
  <div class="ns-checkboxes__item">
   <input class="ns-checkboxes__input" id="organisation-4" name="organisation" type="checkbox" value="DfT">
   <label class="ns-label ns-checkboxes__label" for="organisation-4">
    <span class="ns-label-span">Ministère de l'Éducation et du Développement de la petite enfance</span>
   </label>
  </div>
 </div>
</fieldset>

Basic checkbox with error

Let users select one or more options by using the checkboxes component.

Basic checkbox example

Select options

Waste from animal carcasses

Waste from mines or quarries

Farm or agricultural waste

<div class="ns-fieldset ns-fieldset-message-error">
	<fieldset class="ns-fieldset">
		<legend class="ns-fieldset__legend noBorder">
			<h3 class="ns-fieldset__heading">
			Basic checkbox example
			</h3>
		</legend>
		<span id="changed-name-error" class="ns--message ns-error-message field-validation-error">
			<i class="fa fa-exclamation-circle error-indicator errorAlert" aria-hidden="true"></i>
			<span class="ns-visually-hidden">Error:</span> Select options
		</span>
		<div class="ns-checkboxes">
			<div class="ns-checkboxes__item">
				<input class="ns-checkboxes__input" id="waste2" name="waste11" type="checkbox" value="carcasses">
				<label class="ns-label ns-checkboxes__label" for="waste2">
					<span class="ns-label-span">Waste from animal carcasses</span>
				</label>
			</div>
			<div class="ns-checkboxes__item">
				<input class="ns-checkboxes__input" id="waste3" name="waste11" type="checkbox" value="mines">
				<label class="ns-label ns-checkboxes__label" for="waste3">
					<span class="ns-label-span">Waste from mines or quarries</span>
				</label>
			</div>
			<div class="ns-checkboxes__item">
				<input class="ns-checkboxes__input" id="waste4" name="waste11" type="checkbox" value="farm">
				<label class="ns-label ns-checkboxes__label" for="waste4">
					<span class="ns-label-span">Farm or agricultural waste</span>
				</label>
			</div>
		</div>
	</fieldset>	
</div>

Exemple de case à cocher

Sélectionnez les options.

Déchets de carcasses d'animaux

Déchets de mines ou carrières

Déchets agricoles

<div class="ns-fieldset ns-fieldset-message-error">
	<fieldset class="ns-fieldset">
		<legend class="ns-fieldset__legend noBorder">
			<h3 class="ns-fieldset__heading">Exemple de case à cocher </h3>
		</legend>
		<span id="changed-name-error" class="ns--message ns-error-message field-validation-error">
			<i class="fa fa-exclamation-circle error-indicator errorAlert" aria-hidden="true"> </i>
			<span class="ns-visually-hidden">Erreur&nbsp;: </span>Sélectionnez les options.
		</span>
		<div class="ns-checkboxes">
			<div class="ns-checkboxes__item">
				<input class="ns-checkboxes__input" id="waste2FR" name="waste11FR" type="checkbox" value="carcassesFR">
				<label class="ns-label ns-checkboxes__label" for="waste2FR">
					<span class="ns-label-span">Déchets de carcasses d'animaux</span>
				</label>
			</div>
			<div class="ns-checkboxes__item">
				<input class="ns-checkboxes__input" id="waste3FR" name="waste11FR" type="checkbox" value="minesFR">
				<label class="ns-label ns-checkboxes__label" for="waste3">
					<span class="ns-label-span">Déchets de mines ou carrières</span>
				</label>
			</div>
			<div class="ns-checkboxes__item">
				<input class="ns-checkboxes__input" id="waste4FR" name="waste11FR" type="checkbox" value="agricolesFR">
				<label class="ns-label ns-checkboxes__label" for="waste4">
					<span class="ns-label-span">Déchets agricoles</span>
				</label>
			</div>
		</div>
	</fieldset>
</div>