Radios are similar to checkboxes, but unlike checkboxes, you can only select one option from a set of options.
Which is your favorite season?
<style>
#radio-default-example .flex-row {
gap: 12px;
height: 40px;
padding: 0px 12px;
}
#radio-default-example label {
line-height: 40px;
}
</style>
<div class="flex-column" id="radio-default-example">
<p>Which is your favorite season?</p>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-default-example-1" name="browser" />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-default-example-1">Summer</label>
</div>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-default-example-2" name="browser" />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-default-example-2">Spring</label>
</div>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-default-example-3" name="browser" />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-default-example-3">Winter</label>
</div>
</div>
To render a radio as non-interactive, add the disabled attribute to the <input> element
Which browser are you using?
<style>
#radio-disabled-example .flex-row {
gap: 12px;
height: 40px;
padding: 0px 12px;
}
#radio-disabled-example label {
line-height: 40px;
}
</style>
<div class="flex-column" id="radio-disabled-example">
<p>Which browser are you using?</p>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-disabled-example-1" name="browser" disabled />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-disabled-example-1">Chrome</label>
</div>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-disabled-example-2" name="browser" disabled checked />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-disabled-example-2">Firefox</label>
</div>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-disabled-example-3" name="browser" disabled />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-disabled-example-3">Safari</label>
</div>
</div>
You can customize the radio by modifying its tokens, this example modifies the outline with and dot size to get classic appearance
Which operating system are you using?
<style>
#radio-custom-example {
--flexy-comp-radio-dot-size: 0px;
--flexy-comp-radio-selected-outline-width: 6px;
}
#radio-custom-example .flex-row {
gap: 12px;
height: 40px;
padding: 0px 12px;
}
#radio-custom-example label {
line-height: 40px;
}
</style>
<div class="flex-column" id="radio-custom-example">
<p>Which operating system are you using?</p>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-custom-example-4" name="os" />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-custom-example-4">Linux</label>
</div>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-custom-example-5" name="os" />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-custom-example-5">MacOS</label>
</div>
<div class="flex-row">
<div class="flexy-radio">
<input type="radio" id="radio-custom-example-6" name="os" />
<div class="flexy-radio__circle"></div>
</div>
<label for="radio-custom-example-6">Windows</label>
</div>
</div>
flexy-radiosizedot-sizedot-colorunselected-outline-colorunselected-outline-widthunselected-hovered-outline-colorselected-outline-widthselected-outline-colorstate-transition-durationstate-transition-easingLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)