Radio

Radio group

Group radios with one name inside a labelled fieldset.

<fieldset class="border border-0 min-w-0">
	<legend class="mb-2">Choose an option</legend>

	<div class="d-flex flex-column gap-2">
		<div class="form-check">
			<input
				class="form-check-input"
				id="radioGroupOne"
				name="radioGroup"
				type="radio"
				value="option-one"
				checked />
			<label class="form-label" for="radioGroupOne">Option one</label>
		</div>

		<div class="form-check">
			<input
				class="form-check-input"
				id="radioGroupTwo"
				name="radioGroup"
				type="radio"
				value="option-two" />
			<label class="form-label" for="radioGroupTwo">Option two</label>
		</div>

		<div class="form-check">
			<input
				class="form-check-input"
				id="radioGroupThree"
				name="radioGroup"
				type="radio"
				value="option-three" />
			<label class="form-label" for="radioGroupThree">Option three</label>
		</div>
	</div>
</fieldset>

Invalid

Combine .is-invalid and aria-invalid=“true”. Link every radio to feedback after the final .form-check with aria-describedby.

<fieldset class="border border-0 min-w-0">
	<legend class="mb-2">Choose an option</legend>

	<div class="form-check">
		<input
			class="form-check-input is-invalid"
			id="radioInvalidOne"
			name="radioInvalid"
			type="radio"
			value="option-one"
			aria-invalid="true"
			aria-describedby="radioInvalidFeedback" />
		<label class="form-label" for="radioInvalidOne">Invalid option one</label>
	</div>

	<div class="form-check">
		<input
			class="form-check-input is-invalid"
			id="radioInvalidTwo"
			name="radioInvalid"
			type="radio"
			value="option-two"
			aria-invalid="true"
			aria-describedby="radioInvalidFeedback" />
		<label class="form-label" for="radioInvalidTwo">Invalid option two</label>
	</div>

	<div class="invalid-feedback" id="radioInvalidFeedback">Please select one option.</div>
</fieldset>

Disabled

Use the native disabled attribute.

<div class="form-check">
	<input class="form-check-input" id="radioDisabled" name="radioDisabled" type="radio" disabled />
	<label class="form-label" for="radioDisabled">Disabled radio</label>
</div>

CSS Variables

Override these variables on the component or an ancestor.

--form-check-gap: var(--spacer-2);
--form-check-input-size: 1rem;
--form-check-input-border-radius: var(--border-radius-sm, 0.25rem);
--form-check-input-bg-color: var(--bg-surface);
--form-check-input-border-width: var(--border-width);
--form-check-input-border-color: var(--control-border-color);
--form-check-input-checked-bg-color: var(--primary);
--form-check-input-checked-border-color: var(--primary);
--form-check-input-checked-color: var(--on-primary);
--form-check-disabled-bg-color: var(--disabled-bg-color);
--form-check-disabled-border-color: var(--disabled-border-color);
--form-check-transition-duration: var(--transition-duration);
--form-check-transition-easing: var(--transition-easing);