Switch Group: Auto Vertical 

<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup kx-switchgroup--inline">
    <div class="kx-switchgroup__inner">
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="perfect--76073">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="perfect--76073" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Perfect</span>
    </label>
        </div>
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="very-good--54560">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="very-good--54560" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Very Good</span>
    </label>
        </div>
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="good--48101">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="good--48101" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Good</span>
    </label>
        </div>
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="ok--91226">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="ok--91226" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Ok</span>
    </label>
        </div>
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="poor--40594">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="poor--40594" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Poor</span>
    </label>
        </div>
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="very-poor--449">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="very-poor--449" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Very poor</span>
    </label>
        </div>
        <!-- SWITCH radio Component -->
        <div class="kx-switch kx-switch--radio">
            <label class="kx-switch__label" for="catastrophic--49374">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="catastrophic--49374" name="example-radio-group-name"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Catastrophic</span>
    </label>
        </div>
    </div>
</div>
 
<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup{% if inline %} kx-switchgroup--inline{% endif %}{% for class in classes %} {{ class }}{% endfor %}">
    <div class="kx-switchgroup__inner">
        {% for switcher in switches -%}
        {% render '@switch', switcher.context, true %}
        {% endfor -%}
    </div>
</div>
 
{
  "classes": null,
  "inline": true,
  "switches": [
    {
      "context": {
        "label": "Perfect",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    },
    {
      "context": {
        "label": "Very Good",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    },
    {
      "context": {
        "label": "Good",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    },
    {
      "context": {
        "label": "Ok",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    },
    {
      "context": {
        "label": "Poor",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    },
    {
      "context": {
        "label": "Very poor",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    },
    {
      "context": {
        "label": "Catastrophic",
        "type": "radio",
        "name": "example-radio-group-name"
      }
    }
  ]
}
  • Content: 
    // ==========================================================================
// Component: switchgroup (Shared styles for radiobuttons & checkboxes)
// ==========================================================================

// Elements (children)
// ==========================================================================

// Block (parent)
// ==========================================================================

.kx-switchgroup {
    overflow: hidden;
    position: relative;

    .kx-switchgroup__inner {
        @include flex;
        @include flex-row;
        @include flex-wrap;
        margin-top: -1rem;
    }

    .kx-switch {
        @include mt(base);
        flex-basis: 100%;
    }

    > * {
        flex-basis: 100%;
    }
}

// Modifiers
// ==========================================================================

.kx-switchgroup--inline {
    .kx-switchgroup__inner {
        @include flex;
        @include flex-row;
        @include flex-wrap;
    }

    .kx-switch {
        // If number of switches within a switchgroup with modifier --inline is
        // more than 3, we force a stacked view.
        @include at-most(3) {
            @include m(base, large, none, none);
            display: inline-block;
            flex-basis: auto;
        }
    }
}
  • URL: /components/raw/switch-group/_switch-group.scss
  • Filesystem Path: src\components\01-form\switch-group\_switch-group.scss
  • Size: 1.3 KB

There are no notes for this item.