Radio

Default

Use .form-check together with .form-check-input to style native radio inputs.

<div class="form-check">
	<input class="form-check-input" id="radioDefault" name="radioDefault" type="radio" />
	<label class="form-label" for="radioDefault">Default radio</label>
</div>

Checked

Use the native checked attribute to show a checked radio input.

<div class="form-check">
	<input class="form-check-input" id="radioChecked" name="radioChecked" type="radio" checked />
	<label class="form-label" for="radioChecked">Checked radio</label>
</div>

Radio group

Use radio inputs with the same name attribute to create a group where only one option can be selected.

<div class="d-flex flex-column gap-2">
	<div class="form-check">
		<input class="form-check-input" id="radioGroupOne" name="radioGroup" type="radio" 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" />
		<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" />
		<label class="form-label" for="radioGroupThree">Option three</label>
	</div>
</div>

Required

Use .is-required on the label to visually mark required radio groups.

<div class="d-flex flex-column gap-2">
	<div class="form-check">
		<input class="form-check-input" id="radioRequiredOne" name="radioRequired" type="radio" required />
		<label class="form-label is-required" for="radioRequiredOne">Required option one</label>
	</div>

	<div class="form-check">
		<input class="form-check-input" id="radioRequiredTwo" name="radioRequired" type="radio" required />
		<label class="form-label" for="radioRequiredTwo">Required option two</label>
	</div>
</div>

Invalid

Use .is-invalid to style an invalid radio input and show the related feedback message.

<div>
	<div class="form-check">
		<input class="form-check-input is-invalid" id="radioInvalidOne" name="radioInvalid" type="radio" />
		<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" />
		<label class="form-label" for="radioInvalidTwo">Invalid option two</label>
	</div>

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

Disabled

Use the native disabled attribute to disable a radio input.

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

Disabled checked

Disabled radio inputs can also be checked.

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

Inline group

Use flex utilities to display radio inputs inline.

<div class="d-flex flex-wrap gap-3">
	<div class="form-check">
		<input class="form-check-input" id="radioInlineOne" name="radioInline" type="radio" checked />
		<label class="form-label" for="radioInlineOne">One</label>
	</div>

	<div class="form-check">
		<input class="form-check-input" id="radioInlineTwo" name="radioInline" type="radio" />
		<label class="form-label" for="radioInlineTwo">Two</label>
	</div>

	<div class="form-check">
		<input class="form-check-input" id="radioInlineThree" name="radioInline" type="radio" />
		<label class="form-label" for="radioInlineThree">Three</label>
	</div>
</div>