TheaterMania Component Library

Select: Select Error 

<div class="form-input">
    <label class="label label--required">Lorem Ipsum Dolar</label>
    <div class="validation validation--select validation--required validation--error">
        <div class="select-icon-container">
            <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
        </div>
        <select name="select" class="select validation-item">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
    </div>
    <span class="input-error">Quisque rutrum aenean imperdiet. Quisque rutrum aenean imperdiet.</span>
</div>
 
<div class="form-input">
  {{#if label}}
    {{> @label required=required value=label}}
  {{/if}}
  <div class="validation validation--select{{#if required}} validation--required{{/if}}{{#if error}} validation--error{{/if}}">
    <div class="select-icon-container">
      {{render '@icons--arrow-bottom'}}
    </div>
    <select {{#if id}} id="{{id}}"{{/if}} {{#if name}} name="{{name}}"{{/if}} class="select validation-item">
      {{#each options}}
        <option value="{{key}}"{{#if attributes}} {{attributes}}{{/if}}>{{option}}</option>
      {{/each}}
    </select>
  </div>
  {{#if error}}
  <span class="input-error">{{error}}</span>
  {{/if}}
</div>
 
{
  "name": "select",
  "label": "Lorem Ipsum Dolar",
  "required": true,
  "options": {
    "": "Select",
    "repair": "Pellentesque eu pretium",
    "order": "Nam quam nunc blandit vel",
    "returns": "Donec sodales sagittis magna",
    "general": "Sed consequat leo eget"
  },
  "error": "Quisque rutrum aenean imperdiet. Quisque rutrum aenean imperdiet."
}
  • Content: 
    .select-icon-container {
  position: relative;

  .icon {
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
    top: 0.5rem;
    right: 0.5rem;
  }
}

.select {
  padding: 0.5rem;
  width: 100%;
  font-size: $ms-0;
  border: 1px solid $color-border;
  border-radius: $border-radius;
  font-family: $font-body;
  text-indent: 0.25rem;
  color: $color-text;
  background: none;
  appearance: none;

  &::-ms-expand {
    display: none;
  }

  &:hover,
  &:focus {
    cursor: pointer;
    border-color: $color-primary-light;

    .validation--error & {
      border-color: $color-error;
    }
  }
}
  • URL: /components/raw/select/Select.scss
  • Filesystem Path: src/components/01-Units/Form Elements/Select/Select.scss
  • Size: 610 Bytes

There are no notes for this item.