Radio Buttons

Aligned to right of label To visually stay inline with other inputs
Radio group with shared left label

Use class .noPadding or .noPaddingTop / Bottom to eliminate or reduce spacing between inputs.

Default padding
noPaddingTop (bottom padding is still rendered)
noPadding

Radio Buttons With Icons

Radio Selector Groups

Select one value from a group of radio buttons.

Changing the icon according to checked status of the radio button probably doesn't make much sense in practice, but the feature is supported.

on/off icon classes are supported because they're declared in iconToggleGroup where it makes more sense with checkboxes.

Selection Bar: Single (Radio Inputs)

.selectionBar.single

A group of radio buttons can be displayed as a horizontal or vertical "bar."

The primary classes are:

  • .selectionBar.single (on the <ul>)
  • .iconToggleGroup (on the container <div> inside each ul)

It's .single because selectionBar is the base class and…

  • .single is for a bar of radio buttons
  • .multiple is for a bar of checkboxes

Utility classes on the container div inside each ul can hide the radio input, icon, and/or label. (It's the same place as .iconToggleGroup)

  • .hiddenRadio
  • .hiddenIcon*
  • .hiddenLabel
  • Never exclude the label from the DOM or assign it display: none
  • * If there are no icons, it's better to just exclude that label completely rather than use helper class hiddenIcon

In this example, the STOCK icon changes according to checked status of the radio button. This probably doesn't make much sense in practice, but the feature is supported.

on/off icon classes are supported because they're declared in iconToggleGroup where it makes more sense with checkboxes.

In this example, some radios are randomly disabled to demonstrate & test disabled radio buttons. Reload the page to get a new set of randomly disabled radio buttons.

Radio + icon + label (nothing hidden)
hidden icon — accomplish the same thing by excluding <label>... file.svg ...</label>
hidden label — label should not be excluded for accesibility reasons
hidden radio
hidden radio & icon — accomplish the same thing by excluding <label>... file.svg ...</label>
hidden radio & label — label should not be excluded for accesibility reasons
HTML

<ul class='reset selectionBar single noMargin'>
	<li>
		<!-- helper classes for .iconToggleGroup: .hiddenRadio .hiddenIcon .hiddenLabel -->
		<div class='iconToggleGroup hiddenRadio'>
			<input type='radio' name='status' id='status_STOCK' value='STOCK' checked />
			<!-- Use icon on/off classes with two labels to switch icon based on radio:checked status -->
			<label for='status_STOCK' class='icon on'><?= preg_replace("/{{class-name}}/", "inventory", file_get_contents("images/icons/inventory.svg")) ?></label>
			<label for='status_STOCK' class='icon off'><?= preg_replace("/{{class-name}}/", "nonInventory", file_get_contents("images/icons/nonInventory.svg")) ?></label>
			<!-- Always include a <label> in DOM - even if it is visually hidden with .hiddenLabel -->
			<label for='status_STOCK'>STOCK</label>
		</div>
	</li>
	<li>
		<div class='iconToggleGroup hiddenRadio'>
			<input type='radio' name='status' id='status_TBD50' value='TBD50' />
			<label for='status_TBD50' class='icon'><?= preg_replace("/{{class-name}}/", "sale", file_get_contents("images/icons/sale.svg")) ?></label>
			<label for='status_TBD50'>TBD50</label>
		</div>
	</li>
	<li>
		<div class='iconToggleGroup hiddenRadio'>
			<input type='radio' name='status' id='status_FIVEDAYS' value='FIVEDAYS' />
			<!-- If no icon, just eliminate this <label class='icon'>… -->
			<label for='status_FIVEDAYS' class='icon'><?= preg_replace("/{{class-name}}/", "datedTerms", file_get_contents("images/icons/feed.svg")) ?></label>
			<label for='status_FIVEDAYS'>FIVEDAYS</label>
		</div>
	</li>
</ul>

Center the Bar

Add class <ul class='reset selectionBar single centered'> to center the selection bar.

Vertical Layout

Set classes as <ul class='reset selectionBar single vertical'> for a vertical layout.

Radio + icon + label (nothing hidden)
hidden icon — accomplish the same thing by excluding <label>... file.svg ...</label>
hidden label — label should not be excluded for accesibility reasons
hidden radio
hidden radio & icon — accomplish the same thing by excluding <label>... file.svg ...</label>
hidden radio & label — label should not be excluded for accesibility reasons

Overriding the Color Scheme

Use this sample scss code to override the default color scheme, fonts, and icon sizes.

HTML

<ul class='reset selectionBar single iAmSpecial'>
SCSS

form {
	.iAmSpecial {
		background-color: red; // 1px vertical gutter

		li {
			background-color: orange; // non-selected <li>s

			&:hover {
				background-color: chocolate;
			}

			label {
				font-size: 18pt;
				color: yellow;
	
				&.icon {
					svg {
						fill: yellow;
						width: auto;
						height: 48px;
					}
				}
			}

			&:has(input[type=radio]:checked) {
				background-color: salmon; // selected <li>
				border-color: moccasin; // vertical border L/R for selected <li>
			}

			&:has(input[type=radio]:disabled) {
				&:hover {
					background-color: orange; // same as <li>:hover
				}
			}
		}
	}
}

Related content: Checkboxes.