Topcoat

CSS for clean and fast web apps

Radio Button







Examples

Show code snippets

HTML

<!-- NO LABEL -->
<label class="topcoat-radio-button">
  <input type="radio" name="topcoat">
  <div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- LEFT LABEL -->
<label class="topcoat-radio-button">
  Left label
  <input type="radio" name="topcoat">
  <div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- RIGHT LABEL -->
<label class="topcoat-radio-button">
  <input type="radio" name="topcoat">
  <div class="topcoat-radio-button__checkmark"></div>
  Right label
</label>
<br>
<br>
<!-- DISABLED -->
<label class="topcoat-radio-button">
  <input type="radio" name="topcoat" Disabled>
  <div class="topcoat-radio-button__checkmark"></div>
  Disabled
</label>