Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<label class="ts-radio">
<input name="eat" type="radio" checked />
Breakfast
</label>States
A radio button can show it's currently disabled.
<label class="ts-radio">
<input name="linux" type="radio" disabled />
Arch Linux
</label>Variations
A radio button can show it's in an invalid state.
<label class="ts-radio is-negative">
<input name="love" type="radio" />
Ferris Wheel of Love
</label>Use a solo radio button to remove extra spacing without label text.
<label class="ts-radio is-solo">
<input name="solo" type="radio" />
</label>A radio button can have different sizes.
<label class="ts-radio is-small">
<input name="size" type="radio" checked />
Small radio button
</label>
<label class="ts-radio">
<input name="size" type="radio" />
Default radio button
</label>
<label class="ts-radio is-large">
<input name="size" type="radio" />
Large radio button
</label>Compositions
Wrap can arrange radio buttons horizontally or vertically.
Gender
Sound Mode
<div class="ts-wrap is-vertical">
<div class="ts-text is-label">Gender</div>
<div class="ts-wrap">
<label class="ts-radio">
<input name="gender" type="radio" checked />
Male
</label>
<label class="ts-radio">
<input name="gender" type="radio" />
Female
</label>
<label class="ts-radio">
<input name="gender" type="radio" />
Other
</label>
</div>
<div class="ts-text is-label">Sound Mode</div>
<div class="ts-wrap is-vertical is-compact">
<label class="ts-radio">
<input name="ring" type="radio" checked />
Sound
</label>
<label class="ts-radio">
<input name="ring" type="radio" />
Vibrate
</label>
<label class="ts-radio">
<input name="ring" type="radio" />
Mute
</label>
</div>
</div>