Radios

Design

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.

<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>
<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>