Radio button attached to a text box to allow a user to select a preferred contact
Structure
- Combination can only be used when there are at least 2 questions of the same type, e.g. multiple phone numbers
- The radio button can only be combined with text inputs. It can't be paired with other form field types
- Radio is always attached to the right of the text box until the screen width is too small and it drops to under the text box
- There is no disabled state of the radio button to avoid users thinking the text field is also disabled
Placement
- Pattern is intended to be used when we want a user to select a preferred phone number
- PROHIBITED: Using as a single form question
- PROHIBITED: Using as a selection device like yes or no
Labels
- Attempt to keep the radio button label on one word or very short to maximise the changes the button stays to the right for the textbox on mobiles
Errors
- If you require the radio button to be selected during page submission, only one non-selection error message is displayed above the section
- There is no inline error message for the radio button
- Only the text box has an inline error message
Accessibility
- Additional invisible text can be included to ensure the accessibility of the textbox and radio button
Use case
- Adding or editing multiple phone number types (UK change of telephone numbers journey)
- Please also see International contact if wanting to capture international dialing codes with a preferred contact.
Examples
Standard preferred contact
Preferred contact input valid
Preferred contact input error
Preferred contact no selection error
Preferred contact disabled
Notes for developers
The radio button can only be combined with text inputs. It can't be paired with other form field types
An extra span is required within the a-radio__label-inner to hold hidden text. This span is essential to making the component accessible and should contain the name of the option and the u-hidden--visually class.
Example:
<span class="a-radio__label"><span class="a-radio__label-inner"> Preferred <span class="u-hidden--visually"> Home phone </span></span></span>Notes for testers
- The label should be displayed to the right of the radio button and should activate the radio button when selected (as should the radio button itself.
Code Examples
Standard preferred contact
<fieldset class"m-preferred-contact" role="group">
<legend class="u-hidden--visually">...</legend>
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" id="..." />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Preferred contact valid
<fieldset class"m-preferred-contact" role="group">
<legend class="u-hidden--visually">...</legend>
<div class="m-form-row is-valid">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__validation-message">...</p>
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" id="..." aria-invalid="false" />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Preferred contact input error
<fieldset class"m-preferred-contact" role="group">
<legend class="u-hidden--visually">...</legend>
<div class="m-form-row is-error">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__error-message">...</p>
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" id="..." aria-invalid="true" />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Preferred contact no selection error
<fieldset class"m-preferred-contact is-group-error" role="group" aria-invalid="true>
<legend class="u-hidden--visually">...</legend>
<div class="m-card m-card-notification m-card-notification--warning" role="status">
<div class="m-card-content">
<p>...</p>
</div>
</div>
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" id="..." />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Standard preferred contact disabled
<fieldset class"m-preferred-contact" role="group">
<legend class="u-hidden--visually">...</legend>
<div class="m-form-row is-disabled">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" disabled id="..." />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." disabled />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Required preferred contact
At least one required
<fieldset class"m-preferred-contact" role="group" aria-required="true">
<legend class="u-hidden--visually">...</legend>
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" id="..." />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Particular field required
<fieldset class"m-preferred-contact" role="group">
<legend class="u-hidden--visually">...</legend>
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-preferred-contact-item">
<div class="m-preferred-contact-item__textbox">
<input class="a-textbox" type="tel" name="" id="..." aria-required="true" />
</div>
<div class="m-preferred-contact-item__radio">
<label class="a-radio" for="...">
<input class="a-radio__input" type="radio" name="radio_group" id="..." value="..." />
<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
<span class="a-radio__ui"></span>
</label>
</div>
</div>
</div>
</div>
...
</fieldset>Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-preferred-contact |
Needed to for error and valid states to work properly | Yes | fieldset |
|
.m-preferred-contact-item |
Base for individual form rows | Yes | .m-preferred-contact .m-form-row__content > div |
|
.m-preferred-contact-item__textbox |
Textbox styling for preferred contact | Yes | .m-preferred-contact-item > div |
|
.a-textbox |
Additional styles for textboxes | Yes | .m-preferred-contact-item__textbox > input |
|
.m-preferred-contact-item__radio |
Container for preferred radio | Yes | .m-preferred-contact-item__textbox + div |
|
.a-radio |
Additional styles for radios | Yes | .m-preferred-contact-item__radio > label |
|
.a-radio__input |
Additional styles for radio | Yes | .a-radio > input |
|
a-radio__label |
Styles for radio label | Yes | .a-radio__input + span |
|
.radio__label--inner |
Styles in order to keep the label centered when multiple lines are needed | Yes | .a-radio__label > span |
|
.a-radio__ui |
Animations for the radio | Yes | .a-radio__label + span |
|
is-group-error |
Error styling for radio area | .m-preferred-contact |
Keyboard operations
- TAB
-
Tabbing to an group of radio should make the radio option clearly visually different so that the focus point on the page is obvious to the user.
- SPACE
-
With focus on the radio option, pressing SPACE will select/de-select the radio option.
- CURSOR KEYS
-
With focus on the radio option, pressing any CURSOR KEY will move the focus to the next/previous option within the radio option group.