Checkboxes allow users to select one or more options from a visible list, whereas radio buttons allow a user to select only one option.
Code snippet
<div class="example--wrapper">
<fieldset class="ds-c-fieldset">
<legend class="ds-c-label"><span>Checkbox example</span></legend>
<span class="ds-c-field__hint">Helpful hint text</span>
<input
class="ds-c-choice"
id="checkbox-1"
type="checkbox"
name="checkbox-choices"
value="checkbox-1"
checked
/>
<label for="checkbox-1">
<span>Choice 1</span>
</label>
<input
class="ds-c-choice"
id="checkbox-2"
type="checkbox"
name="checkbox-choices"
value="checkbox-2"
/>
<label for="checkbox-2">
<span>Choice 2</span>
</label>
<input
class="ds-c-choice"
id="checkbox-3"
type="checkbox"
name="checkbox-choices"
value="checkbox-3"
disabled
/>
<label for="checkbox-3">
<span>Disabled choice 3</span>
</label>
</fieldset>
<fieldset class="ds-c-fieldset">
<legend class="ds-c-label"><span>Radio example</span></legend>
<span class="ds-c-field__error-message" role="alert">
Example error message
</span>
<input
class="ds-c-choice ds-c-choice--error"
id="radio-1"
type="radio"
name="radio-choices"
value="radio-1"
/>
<label for="radio-1">
<span>Choice 1</span>
<span class="ds-c-field__hint">Choice hint text</span>
</label>
<input
class="ds-c-choice ds-c-choice--error"
id="radio-2"
type="radio"
name="radio-choices"
value="radio-2"
/>
<label for="radio-2"><span>Choice 2</span></label>
</fieldset>
<fieldset class="ds-c-fieldset">
<legend class="ds-c-label"><span>Small size example</span></legend>
<input
class="ds-c-choice ds-c-choice--small"
id="small-1"
type="radio"
name="size-variants"
value="normal"
checked
/>
<label for="small-1">
<span>Choice 1</span>
</label>
<input
class="ds-c-choice ds-c-choice--small"
id="small-2"
type="radio"
name="size-variants"
value="small"
/>
<label for="small-2">
<span>Choice 2</span>
</label>
</fieldset>
<div class="example--wrapper example--inverse">
<fieldset class="ds-c-fieldset">
<legend class="ds-c-label"><span>Inverse example</span></legend>
<span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
<span class="ds-c-field__error-message ds-c-field__error-message--inverse"
>Example error message</span
>
<input
class="ds-c-choice ds-c-choice--inverse ds-c-choice--error"
id="inverse-1"
type="checkbox"
name="inverse-choices"
value="inverse-1"
/>
<label for="inverse-1">
<span>Choice 1</span>
<span class="ds-c-field__hint ds-c-field__hint--inverse">Choice hint text</span>
</label>
<input
class="ds-c-choice ds-c-choice--inverse ds-c-choice--error"
id="inverse-2"
type="checkbox"
name="inverse-choices"
value="inverse-2"
/>
<label for="inverse-2">
<span>Choice 2</span>
</label>
<input
class="ds-c-choice ds-c-choice--inverse ds-c-choice--error"
id="inverse-3"
type="checkbox"
name="inverse-choices"
value="inverse-3"
disabled
/>
<label for="inverse-3">
<span>Disabled choice 3</span>
</label>
</fieldset>
</div>
</div>