Taxonomic name: M-RADIO-CARD-CONTROL
Added on: v2023.01 (25/05/23)
Updated on: v2023.01 (25/05/23)

Radio card controls

...

Design and usage

Examples

Radio card control - Default

Interactive example

Code example

<fieldset class="m-form-row m-form-row--full-width">
	<legend class="a-label">...</legend>
	<p class="m-form-row__explanatory-text" id="...">...</p>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group-items--2-small m-radio-card-control [ Modifers ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
		</ul>
		<div class="u-text--center">
			<button class="a-button a-button--tertiary a-button--add">
				<span class="a-button__inner">...</span>
			</button>
		</div>
	</div>
</fieldset>

Radio card control - Valid

Interactive example

Code example

<fieldset class="m-form-row m-form-row--full-width is-valid">
	<legend class="a-label">...</legend>
	<p class="m-form-row__explanatory-text" id="...">...</p>
	<div class="m-form-row__content">
		<p class="m-form-row__validation-message">...</p>
		<ul class="m-form-row-group m-form-row-group-items--2-small m-radio-card-control [ Modifers ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
		</ul>
		<div class="u-text--center">
			<button class="a-button a-button--tertiary a-button--add">
				<span class="a-button__inner">...</span>
			</button>
		</div>
	</div>
</fieldset>

Radio card control - Error

Interactive example

Code example

<fieldset class="m-form-row m-form-row--full-width is-error" aria-invalid="true" aria-describedby="...">
	<legend class="a-label">...</legend>
	<p class="m-form-row__explanatory-text" id="...">...</p>
	<div class="m-form-row__content">
		<p class="m-form-row__error-message"><span class="u-hidden--visually">Error: </span>...</p>
		<ul class="m-form-row-group m-form-row-group-items--2-small m-radio-card-control [ Modifers ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
		</ul>
		<div class="u-text--center">
			<button class="a-button a-button--tertiary a-button--add">
				<span class="a-button__inner">...</span>
			</button>
		</div>
	</div>
</fieldset>

Radio card control - Disabled

Interactive example

Code example

<fieldset class="m-form-row m-form-row--full-width is-disabled" disabled>
	<legend class="a-label">...</legend>
	<p class="m-form-row__explanatory-text" id="...">...</p>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group-items--2-small m-radio-card-control [ Modifers ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." decoding="async" width="150" height="75" alt="..." aria-label="...">
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
		</ul>
		<div class="u-text--center">
			<button class="a-button a-button--tertiary a-button--add">
				<span class="a-button__inner">...</span>
			</button>
		</div>
	</div>
</fieldset>

Development and test

Notes for developers

Inline icon images should be made up as a single sprite with a fixed size of 150px x 75px, or larger, while maintaining the same ratio, e.g. 300px x 150px, with the two versions of the individual icons within it being no more than 75px x 75px and centred horizontally and vertically.

Notes for testers

...

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-form-row-group`	Base styling for a group of form inputs	Yes	`.m-form-row__content > ul`
`.m-form-row-group-items--size-breakpoint`	Modifier to place radios in multiple columns for each breakpoints size: from 1 to 6 breakpoint: small, medium, large		`.m-form-row-group`
`.m-form-row-group-item`	Base for individual radios	Yes	`.m-form-row-group > li`
`.m-form-row-group-item--full-width`	Modifer to force radios to be full width (not natural width) when not in column system		`.m-form-row-group-item`	Only exclude if using a group of standalone checkboxes
`.m-radio-card-control`	Base styling for a group of radio card controls	Yes	`.m-form-row-group`
`.a-radio`	Additional styles for radios	Yes	`span`
`.a-radio__input`	Additional styles for radios	Yes	`.a-radio > input`
`.a-radio__label`	Styles for the label	Yes	`.a-radio__input + span`
`.a-radio__label-image`	Wrapper to mask inline sprite image		`.a-radio__label + span`	Place inline image within this wrapper to ensure only selected spite image is visible
`.a-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`

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.

Component releases

Added on: v2023.01 (25/05/23)
Updated on: v2023.01 (25/05/23)

Latest update:

updated: Component added.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team