Conditionally revealing content
Reveal additional questions, depending on the context.
Choose an option below to see how this works.
Back to components
Radio buttons
Use these to let users choose a single option from a list.
HTML Snippet for radio buttons
<h1 class="heading-medium">Which bin is damaged?</h1>
<form>
<div class="form-group">
<fieldset>
<legend class="sr-only">Which bin is damaged?</legend>
<label class="block-label" for="radio-1" data-target="radio-1">
<input type="radio" id="radio-1" name="radio-group" value="Black bin (General waste)" aria-controls="radio-1" aria-expanded="false">
Black bin (General waste)
</label>
<label class="block-label" for="radio-2" data-target="radio-2">
<input type="radio" id="radio-2" name="radio-group" value="Isle of Man or the Channel Islands" aria-controls="radio-2" aria-expanded="false">
Brown bin (Garden waste)
</label>
<label class="block-label" for="radio-3" data-target="radio-3">
<input type="radio" id="radio-3" name="radio-group" value="Green bin (Recycling)" aria-controls="radio-3" aria-expanded="false">
Green bin (Recycling)
</label>
</fieldset>
</div>
</form>
Example
How do you want to be contacted?
HTML Snippet for conditionally revealing content
<h1 class="heading-medium">How do you want to be contacted? </h1>
<form>
<div class="form-group">
<fieldset>
<legend class="sr-only">How do you want to be contacted? </legend>
<label class="block-label" for="contact-by-email" data-target="contact-by-email">
<input type="radio" id="contact-by-email" name="radio-contact-group" value="Email" aria-controls="contact-by-email" aria-expanded="false">
Email
</label>
<div class="panel panel-border-narrow js-hidden" id="contact-by-email">
<label class="form-label" for="contact-email">Email address </label>
<input class="form-control" name="contact-email" type="text" id="contact-email">
</div>
<label class="block-label" for="contact-by-phone" data-target="contact-by-phone">
<input type="radio" id="contact-by-phone" name="radio-contact-group" value="phone" aria-controls="contact-by-phone" aria-expanded="false">
Phone
</label>
<div class="panel panel-border-narrow js-hidden" id="contact-by-phone">
<label class="form-label" for="contact-phone">Phone number </label>
<input class="form-control" name="contact-phone" type="text" id="contact-phone">
</div>
<label class="block-label" for="contact-by-text" data-target="contact-by-text">
<input type="radio" id="contact-by-text" name="radio-contact-group" value="text message" aria-controls="contact-by-text" aria-expanded="false">
Text message
</label>
<div class="panel panel-border-narrow js-hidden" id="contact-by-text">
<label class="form-label" for="contact-text-message">Mobile phone number </label>
<input class="form-control" name="contact-text-message" type="text" id="contact-text-message">
</div>
</fieldset>
</div>
</form>Error handling
- add a class of
form-group-errorto<div class="form-group"> - the error message
<span class="error-message">Choose an answer</span>goes beneath the<legend>
Example
Which bin is damaged?
HTML Snippet for radio buttons error handling
<h1 class="heading-medium">Which bin is damaged?</h1>
<form>
<div class="form-group form-group-error">
<fieldset>
<legend class="sr-only">Which bin is damaged?</legend>
<span class="error-message">Choose an answer</span>
<label class="block-label" for="radio-1-error" data-target="radio-1-error">
<input type="radio" id="radio-1-error" name="radio-group-error" value="Black bin (General waste)" aria-controls="radio-1-error" aria-expanded="false">
Black bin (General waste)
</label>
<label class="block-label" for="radio-2-error" data-target="radio-2-error">
<input type="radio" id="radio-2-error" name="radio-group-error" value="Brown bin (Garden waste)" aria-controls="radio-2-error" aria-expanded="false">
Brown bin (Garden waste)
</label>
<label class="block-label" for="radio-3-error" data-target="radio-3-error">
<input type="radio" id="radio-3-error" name="radio-group-error" value="Green bin (Recycling)" aria-controls="radio-3-error" aria-expanded="false">
Green bin (Recycling)
</label>
</fieldset>
</div>
</form>