# Radio

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- Content:
  `

      $radio-size: $spacer-md; // ~24px
      $radio-offset: 0.475rem; // ~16px
      $radio-indent: $radio-offset + $radio-size;

      .radio {
        &.custom-form-control {
          padding-left: $radio-indent;
        }

        // Set styles for all form states
        > .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 {
            background-color: $radio-bg-disabled;
            border-color: $radio-border-disabled;
          }
        }

        .form-label {
          @include control-icon($radio-size, $radio-offset);

          margin-bottom: 0;

          // Background (color)
          &::before {
            pointer-events: none;
            user-select: none;

            margin-right: $radio-offset;

            background-color: $radio-bg;
            border: 2px solid $radio-border;
            border-radius: 50%;
          }

          // Foreground (icon)
          &::after {
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 75% 75%;
          }
        }
      }

  `
- URL: /components/raw/radio/_radio.scss
- Filesystem Path: components/05-atoms/form-elements/radio/_radio.scss
- Size: 1.3 KB

- Content:
  `

      status: ready

  `
- URL: /components/raw/radio/radio.yml
- Filesystem Path: components/05-atoms/form-elements/radio/radio.yml
- Size: 14 Bytes

- Handle: @radio
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/form-elements/radio/radio.html

No notes defined.