@kabbage/sprout 0.25.2

Radio Button Component

A CSS implementation of the Sprout radio button component.

.spr-radio-btn-group-container

scss 
.spr-radio-btn-group-container {
  @include spr-space-stack-container(xxs);

  .spr-radio-btn-group-label {
    @include spr-text(label-sm);
    font-weight: spr-font-weight(bold);
  }
}

Example

html 
<div class="spr-radio-btn-group-container">
  <div class="spr-radio-btn-group-label">Languages</div>
  <div class="spr-inline-container-md">
    <div class="spr-radio-btn-container-top">
      <input class="spr-radio-btn" type="radio" name="languages" id="csharp" value="csharp">
      <label for="csharp">
        <div>This is C#</div>
        <div>This is C#</div>
        <div>This is C#</div>
      </label>
    </div>
    <div class="spr-radio-btn-container">
      <input checked class="spr-radio-btn" type="radio" name="languages" id="ts" value="ts">
      <label for="csharp">
        <div>This is Typescript</div>
        <div>This is Typescript</div>
        <div>This is Typescript</div>
      </label>
    </div>
    <div class="spr-radio-btn-container-top">
      <input class="spr-radio-btn spr-radio-btn-error" type="radio" name="languages" id="java" value="java">
      <label for="csharp">
        <div>This is Java</div>
        <div>This is Java</div>
        <div>This is Java</div>
      </label>
    </div>
    <div class="spr-radio-btn-container">
      <input disabled class="spr-radio-btn" type="radio" name="languages" id="python" value="python">
      <label for="csharp">
        <div>This is Python</div>
        <div>This is Python</div>
        <div>This is Python</div>
      </label>
    </div>
  </div>
</div>

Compiled CSS

Example

scss 
@import 'components/radio-button';