Radio

<div>
    <div class="form-group">
        <div class="custom-form-control radio">
            <input type="radio" id="customRadio1" checked="checked" name="customRadios" class="form-control__input">
            <label class="form-label" for="customRadio1">Ich möchte eine vegetarische Option zum Mittagessen</label>
        </div>
        <div class="custom-form-control radio">
            <input type="radio" id="customRadio2" name="customRadios" class="form-control__input">
            <label class="form-label" for="customRadio2">Ich möchte Fisch zum Mittagessen</label>
        </div>
        <div class="custom-form-control radio">
            <input type="radio" disabled="disabled" id="customRadio3" name="customRadios" class="form-control__input">
            <label class="form-label" for="customRadio3">Ich möchte eine vegane Option zum Mittagessen</label>
        </div>
    </div>
    <div class="form-group form-group--invalid">
        <label class="form-label form-label--emphasized">Dein Frühstück</label><small class="form-text">Aufgepasst! Du musst hier eine Auswahl treffen.</small>
        <div class="custom-form-control radio">
            <input type="radio" id="customRadio4" name="customRadios2" class="form-control__input">
            <label class="form-label" for="customRadio4">Avocado</label>
        </div>
        <div class="custom-form-control radio">
            <input type="radio" id="customRadio5" name="customRadios2" class="form-control__input">
            <label class="form-label" for="customRadio5">Mango</label>
        </div>
    </div>
</div>
<div>
    <div class="form-group">
        <div class="custom-form-control radio">
          <input type="radio" id="customRadio1" checked="checked" name="customRadios" class="form-control__input" />
          <label class="form-label" for="customRadio1">Ich möchte eine vegetarische Option zum Mittagessen</label>
        </div>
        <div class="custom-form-control radio">
          <input type="radio" id="customRadio2" name="customRadios" class="form-control__input" />
          <label class="form-label" for="customRadio2">Ich möchte Fisch zum Mittagessen</label>
        </div>
        <div class="custom-form-control radio">
          <input type="radio" disabled="disabled" id="customRadio3" name="customRadios" class="form-control__input" />
          <label class="form-label" for="customRadio3">Ich möchte eine vegane Option zum Mittagessen</label>
        </div>
    </div>

    <div class="form-group form-group--invalid">
        <label class="form-label form-label--emphasized">Dein Frühstück</label>
        <small class="form-text">Aufgepasst! Du musst hier eine Auswahl treffen.</small>
        <div class="custom-form-control radio">
          <input type="radio" id="customRadio4" name="customRadios2" class="form-control__input" />
          <label class="form-label" for="customRadio4">Avocado</label>
        </div>
        <div class="custom-form-control radio">
          <input type="radio" id="customRadio5" name="customRadios2" class="form-control__input" />
          <label class="form-label" for="customRadio5">Mango</label>
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    $radio-size: $spacer-md; // ~24px
    $radio-offset: .475rem;    // ~16px
    $radio-indent: $radio-offset + $radio-size;
    
    .radio {
      &.custom-form-control {
        padding-left: $radio-indent;
      }
    
      // Set styles for all form states
      // sass-lint:disable force-pseudo-nesting
      > .form-control__input {
        &:focus ~ .form-label::before {
          border-color: $radio-border-hoverfocus;
        }
    
        &:checked ~ .form-label::after {
          background-image: radio-icon($radio-color);
        }
    
        &:checked:disabled ~ .form-label::after {
          background-image: radio-icon($radio-color-disabled);
        }
    
        &:focus ~ .form-label::after {
          background-image: radio-icon($radio-border-hoverfocus);
        }
    
        &:disabled ~ .form-label::before {
          border-color: $radio-border-disabled;
          background-color: $radio-bg-disabled;
        }
      }
    
      .form-label {
        @include control-icon($radio-size, $radio-offset);
        margin-bottom: 0;
    
        // Background (color)
        &::before {
          margin-right: $radio-offset;
          border: 2px solid $radio-border;
          border-radius: 50%;
          background-color: $radio-bg;
          pointer-events: none;
          user-select: none;
        }
    
        // Foreground (icon)
        &::after {
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 75% 75%;
        }
      }
    }
    
  • URL: /components/raw/radio/_radio.scss
  • Filesystem Path: components/01-atoms/form/radio/_radio.scss
  • Size: 1.3 KB

There are no notes for this item.