Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<div class="ts-selection">
<label class="item">
<input type="radio" name="aircon" checked />
<div class="text">Cold</div>
</label>
<label class="item">
<input type="radio" name="aircon" />
<div class="text">Warm</div>
</label>
<label class="item">
<input type="radio" name="aircon" />
<div class="text">Wind</div>
</label>
</div>Introduction
This component switches between options. For content switching, use Tab.
States
A disabled selection item does not allow user interaction.
<div class="ts-selection">
<label class="item">
<input type="radio" name="version" disabled />
<div class="text">Stable</div>
</label>
<label class="item">
<input type="radio" name="version" checked />
<div class="text">Development</div>
</label>
<label class="item">
<input type="radio" name="version" />
<div class="text">Testing</div>
</label>
</div>Variations
A selection can be circular.
<div class="ts-selection is-circular">
<label class="item">
<input type="radio" name="audio" checked />
<div class="text">Low</div>
</label>
<label class="item">
<input type="radio" name="audio" />
<div class="text">Mid</div>
</label>
<label class="item">
<input type="radio" name="audio" />
<div class="text">High</div>
</label>
</div>A selection can take the width of its container.
<div class="ts-selection is-fluid">
<label class="item">
<input type="radio" name="language" />
<div class="text">Taiwanese</div>
</label>
<label class="item">
<input type="radio" name="language" checked />
<div class="text">English</div>
</label>
<label class="item">
<input type="radio" name="language" />
<div class="text">Japanese</div>
</label>
</div>A selection can have different sizes.
<div class="ts-selection is-small">
<label class="item">
<input type="radio" name="size-1" checked />
<div class="text">Small</div>
</label>
<label class="item">
<input type="radio" name="size-1" />
<div class="text">Small</div>
</label>
</div>
<div class="ts-selection">
<label class="item">
<input type="radio" name="size-2" checked />
<div class="text">Default</div>
</label>
<label class="item">
<input type="radio" name="size-2" />
<div class="text">Default</div>
</label>
</div>
<div class="ts-selection is-large">
<label class="item">
<input type="radio" name="size-3" checked />
<div class="text">Large</div>
</label>
<label class="item">
<input type="radio" name="size-3" />
<div class="text">Large</div>
</label>
</div>A selection can adjust its height for a tighter or more relaxed look.
<div class="ts-selection is-dense">
<label class="item">
<input type="radio" name="density-1" checked />
<div class="text">Dense</div>
</label>
<label class="item">
<input type="radio" name="density-1" />
<div class="text">Dense</div>
</label>
</div>
<div class="ts-selection">
<label class="item">
<input type="radio" name="density-2" checked />
<div class="text">Default</div>
</label>
<label class="item">
<input type="radio" name="density-2" />
<div class="text">Default</div>
</label>
</div>
<div class="ts-selection is-relaxed">
<label class="item">
<input type="radio" name="density-3" checked />
<div class="text">Relaxed</div>
</label>
<label class="item">
<input type="radio" name="density-3" />
<div class="text">Relaxed</div>
</label>
</div>