TheaterMania Component Library

Radio: Radio Error 

<div class="form-input">
    <div class="validation validation--radio validation--error">
        <input type="radio" id="form-radio" class="radio validation">
        <div class="radio-label-container">
            <label for="form-radio" class="label label--radio">Lorem Ipsum Dolor</label>
        </div>
    </div>
    <span class="input-error">Quisque rutrum aenean imperdiet.</span>
</div>
 
<div class="form-input">
  <div class="validation validation--radio{{#if required}} validation--required{{/if}}{{#if error}} validation--error{{/if}}">
    <input type="radio" id="{{id}}"{{#if name}} name="{{name}}"{{/if}} class="radio validation"{{#if type-active}} {{type-active}}{{/if}}>
    <div class="radio-label-container">
      <label for="{{id}}" class="label label--radio{{#if required}} label--required{{/if}}">{{label}}</label>
    </div>
  </div>
  {{#if error}}
    <span class="input-error">{{error}}</span>
  {{/if}}
</div>
 
{
  "id": "form-radio",
  "label": "Lorem Ipsum Dolor",
  "error": "Quisque rutrum aenean imperdiet."
}
  • Content: 
    .radio {
  position: absolute;
  margin: 1px 0 0 0.13rem;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  opacity: 0;
  z-index: 1;

  &:hover + .radio-label-container,
  &:focus + .radio-label-container {
    &::before {
      border-color: $color-primary-light;
    }
  }
}

.radio[disabled] {
  cursor: default;

  &:hover + .radio-label-container,
  &:focus + .radio-label-container {
    &::before {
      border-color: $color-gray-lighter;
    }
  }

  & + .radio-label-container {
    color: $color-gray-lighter;

    .label:hover {
      cursor: default;
    }
  }
}

.label--radio {
  font-size: $ms-0;
  font-weight: normal;
  line-height: 1;

  &:hover {
    cursor: pointer;
  }
}

.radio + .radio-label-container {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid $color-border;
    transition: $transition;
  }

  .validation--error & {
    &::before {
      border-color: $color-error;
    }
  }
}

.radio:checked + .radio-label-container {
  &::before {
    border-color: $color-primary-light;
  }

  &::after {
    content: '';
    position: absolute;
    top: calc(50% + 1px);
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: $color-primary-light;
    transform: translate(25%, -50%);
  }
}

.radio-label-container {
  padding-left: 1.75rem;
}
  • URL: /components/raw/radio/Radio.scss
  • Filesystem Path: src/components/01-Units/Form Elements/Radio/Radio.scss
  • Size: 1.4 KB

There are no notes for this item.