Radios

We have 2 different designs for radio buttons: text only and text with image. You can get text only design using sui-radio class but if you need to add an image is better to use sui-radio-image class.

Below you can find both designs. Click on the tabs to get a visual example and demo code.

Text only (Default)

Radio with image

Unchecked Unchecked Checked Disabled (Unchecked) Disabled (Checked)

<div class="sui-form-field" role="radiogroup">

	<!--
	START:
	Radio option element
	-->
	<label for="unique-id" class="sui-radio">

		<input
			type="radio"
			name="unique-group-name"
			id="unique-id"
			aria-labelledby="label-unique-id"
		/>

		<span aria-hidden="true"></span>

		<span id="label-unique-id">Option name</span>

	</label>
	<!--
	END:
	Radio option element
	-->

</div>

Unchecked Unchecked Checked Disabled (Unchecked) Disabled (Checked)

<div class="sui-form-field" role="radiogroup">

	<!--
	START:
	Radio option element
	-->
	<label for="unique-id" class="sui-radio-image">

		<img
			src="./assets/images/image.png"
			srcset="./assets/images/image.png 1x, ./assets/images/image@2x.png 2x"
			alt="Descriptive text regarding image"
		/>

		<span class="sui-radio">

			<input
				type="radio"
				name="unique-group-name"
				id="unique-id"
				aria-labelledby="label-unique-id"
			/>

			<span aria-hidden="true"></span>

			<span id="label-unique-id">Option name</span>

		</span>

	</label>
	<!--
	END:
	Radio option element
	-->

</div>

There are two ways to align radio buttons: inline and stacked. By default radio buttons are aligned one next to another as inline elements, but you can pile them one on top of another as stacked elements adding sui-radio-stacked class to sui-radio element.

<label class="sui-radio"></label>

<label class="sui-radio sui-radio-stacked"></label>

Radio options have 2 font size variations: default that has 15px font size, and small that has 13px font size. To have smaller font size you just need to add sui-radio-sm class to sui-radio element.

<label class="sui-radio"></label>

<label class="sui-radio sui-radio-sm"></label>