TheaterMania Component Library

Input: Text (error) 

<div class="form-input">
    <div class="validation validation--required validation--error js-validation">
        <label for="label-not-required" class="label">Lorem Ipsum</label>

        <input type="text" name="text-error" class="input validation-item" required>
        <svg class="icon icon--error">
  <use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
        <span class="input-error">Quisque rutrum aenean imperdiet.</span>
    </div>
</div>
 
<div class="form-input">
  <div class="validation{{#if required}} validation--required{{/if}}{{#if error}} validation--error{{/if}} js-validation">
    {{#if label}}
      {{render '@label' modifiers merge=true}}
    {{/if}}
    <input type="{{type}}"{{#if name}} name="{{name}}"{{/if}}{{#if input-id}} id="{{input-id}}"{{/if}} class="input validation-item{{#if class}} {{class}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if type-active}} {{type-active}}{{/if}}>
    {{#if error}}
    {{render '@icons--error'}}
    <span class="input-error">{{error}}</span>
    {{/if}}
  </div>
</div>
 
{
  "name": "text-error",
  "type": "text",
  "label": "Donec pede justo",
  "required": true,
  "error": "Quisque rutrum aenean imperdiet."
}
  • Content: 
    .form-input {
  margin: 0.63rem 0 1rem;
}

.input,
.textarea {
  display: block;
  box-sizing: border-box;
  padding: 0.63rem;
  width: 100%;
  font-size: $ms-0;
  border: 1px solid $color-border;
  border-radius: $border-radius;
  color: $color-text;

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

  &:focus {
    outline: none;
    box-shadow: inset 1px 1px 0.13rem rgba($color-black, 0.25);
  }
}

.input[disabled] {
  border: 1px solid $color-gray-lighter;

  &:hover {
    cursor: default;
  }
}

.validation {
  position: relative;
}

.validation--error {
  .validation-item {
    border-color: $color-error;
  }
}

.input-error {
  display: block;
  margin-top: 0.75rem;
  font-size: $ms-neg-1;
  color: $color-error;
}

.checkbox {
  width: 1rem;
  height: 1rem;

  &:checked {
    outline: none;
    border-color: $color-primary-light;
    box-shadow: inset 1px 1px 0.13rem rgba($color-black, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22bevel%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M13%2033l12%2012%2024-24%22/%3E%3C/svg%3E");
    background-size: 100%;
    background-color: $color-white;
    background-position: 1px;
    background-repeat: no-repeat;
  }
}
  • URL: /components/raw/input/Input.scss
  • Filesystem Path: src/components/01-Units/Form Elements/Input/Input.scss
  • Size: 1.4 KB

There are no notes for this item.