Skip to main contentSkip to docs navigation

Rating

Rating is a set of radio buttons that allow the user to rate something.

Layer: components
View & Edit
On this page

Radio

By design, radio toggle button groups can only have one button checked at a time.

HTML
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off" checked>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-smiley-satisfied-outlined" viewBox="0 0 24 24">
<path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m1.38 6.11a.503.503 0 0 0-.98-.22C15.48 15.72 13.88 17 12 17s-3.49-1.28-3.9-3.11a.503.503 0 0 0-.98.22C7.64 16.4 9.65 18 12 18s4.36-1.6 4.88-3.89"/>
</svg>
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-smiley-somewhat-satisfied-outlined" viewBox="0 0 24 24">
<path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.26 8.29c.18-.21.16-.52-.05-.71a.506.506 0 0 0-.71.05c-.76.87-1.86 1.36-3.01 1.36s-2.25-.5-3.01-1.36a.505.505 0 0 0-.71-.05c-.21.18-.23.5-.05.71.95 1.08 2.32 1.71 3.76 1.71s2.81-.62 3.76-1.71Z"/>
</svg>
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-smiley-neutral-outlined" viewBox="0 0 24 24">
<path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.5 7.5c0-.28-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5h7c.28 0 .5-.22.5-.5"/>
</svg>
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-smiley-somewhat-dissatisfied-outlined" viewBox="0 0 24 24">
<path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.21 8.88c.21-.18.23-.5.05-.71-.95-1.08-2.32-1.71-3.76-1.71s-2.81.62-3.76 1.71c-.18.21-.16.52.05.71.21.18.52.16.71-.05.76-.87 1.86-1.36 3.01-1.36s2.25.5 3.01 1.36c.1.11.24.17.38.17q.18 0 .33-.12Z"/>
</svg>
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-smiley-dissatisfied-outlined" viewBox="0 0 24 24">
<path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m1 8.99c.27-.06.44-.33.38-.6-.52-2.29-2.53-3.89-4.88-3.89s-4.36 1.6-4.88 3.89a.503.503 0 0 0 .98.22c.42-1.83 2.02-3.11 3.9-3.11s3.49 1.28 3.9 3.11c.05.23.26.39.49.39.04 0 .07 0 .11-.01"/>
</svg>
  </label>
</div>