<!-- Standard -->
<label class="radio">
  <input class="radio__input" type="radio" value="1" id="radio-8b76" name="radio-8b76"/><span class="radio__indicator"></span><span class="radio__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

<!-- Deaktiviert -->
<label class="radio radio--disabled">
  <input class="radio__input" type="radio" value="1" id="radio-d6e5" name="radio-d6e5" disabled="disabled"/><span class="radio__indicator"></span><span class="radio__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

<!-- Deaktiviert, ausgewählt -->
<label class="radio radio--disabled">
  <input class="radio__input" type="radio" value="1" checked="checked" id="radio-a0c9" name="radio-a0c9" disabled="disabled"/><span class="radio__indicator"></span><span class="radio__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

<!-- Invalide -->
<label class="radio radio--invalid">
  <input class="radio__input" type="radio" value="1" required="required" id="radio-fd7a" name="radio-fd7a" aria-invalid="true"/><span class="radio__indicator"></span><span class="radio__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `radio-${randomString()}`;
  attr.name = name || attr.name || attr.id;

  //- Prepare wrapAttr object
  wrapAttr = wrapAttr || {};
  wrapAttr.class = classList(wrapAttr.class);

  //- Process options
  if (disabled) {
    attr.disabled = true;
    wrapAttr.class.push('radio--disabled');
  }

  if (invalid) {
    attr['aria-invalid'] = 'true';
    wrapAttr.class.push('radio--invalid');
  }
  
  if (nextline) {
    wrapAttr.class.push('radio--nextline');
  }

//- Render atom
label.radio&attributes(wrapAttr)
  input.radio__input(type='radio', value=value, checked=checked, required=required)&attributes(attr)
  span.radio__indicator
  span.radio__label #{text}
/* Standard */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."
}

/* Deaktiviert */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
  "disabled": true
}

/* Deaktiviert, ausgewählt */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
  "disabled": true,
  "checked": true
}

/* Invalide */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
  "invalid": true,
  "required": true
}

  • Content:
    .radio {
      cursor: pointer;
      display: inline-flex;
      min-height: 3rem;
      padding-left: 4rem;
      position: relative;
    
      // Inline stacked
      & + & {
        margin-left: $spacer;
      }
    }
    
    .radio--disabled {
      cursor: not-allowed;
    }
    
    .radio--nextline {
      margin-bottom: $spacer;
      width: 100%;
    
      & + & {
        margin-left: 0;
      }
    }
    
    .radio__input {
      opacity: 0;
      position: absolute;
      z-index: -1;
    }
    
    .radio__indicator {
      border: 1px solid $color-steelgrey-xdark;
      border-radius: 50%;
      height: 3rem;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      user-select: none;
      width: 3rem;
    
      &::after {
        border-radius: 50%;
        content: '';
        height: 50%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
      }
    
      // Focus, hover style
      .radio__input:not([disabled]):focus ~ &::after,
      .radio:not(.radio--disabled):hover &::after {
        background-color: $color-steelgrey-xlight;
      }
    
      // Radio button is selected
      .radio__input:not([disabled]):checked ~ &::after {
        background-color: $color-blue;
      }
    
      // Radio button is selected, but disabled
      .radio__input[disabled]:checked ~ &::after {
        background-color: $color-steelgrey-dark;
      }
    
      // User currently clicks on radio button
      .radio__input:not([disabled]):active ~ &::after {
        background-color: $color-blue-light;
      }
    
      // Disabled
      .radio__input[disabled] ~ & {
        border-color: $color-steelgrey-dark;
      }
    
      // Invalid
      .radio__input[aria-invalid='true']:invalid ~ & {
        background-color: rgba($color-red, 0.2);
        border-color: $color-red;
      }
    
      // Invalid hover, focus
      .radio__input[aria-invalid='true']:invalid:focus ~ &::after,
      .radio--invalid:hover .radio__input[aria-invalid='true']:invalid ~ &::after {
        background-color: rgba($color-red, 0.3);
      }
    }
    
    .radio__label {
      align-self: center;
      font-size: 1.5rem;
      margin-top: -1px;
    
      // Disabled
      .radio__input[disabled] ~ & {
        color: $color-steelgrey-xdark;
      }
    
      // Invalid
      .radio--invalid .radio__input:invalid ~ &,
      .radio__input[aria-invalid='true']:invalid ~ & {
        color: $color-red;
        font-weight: bold;
      }
    }
    
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/components/atoms/radio/radio.scss
  • Size: 2.1 KB

There are no notes for this item.