Swegon Component Library

Textarea: With Error Message 

<div class="form-item">
    <label for="textfield" class="form-item__label">
        Textfield
    </label>

    <textarea id="textfield" placeholder="Messages" class="textarea__input" aria-invalid="true"></textarea>

    <div class="form-item__error-msg">Här gick det fel</div>
</div>
 
<div class="form-item">
    {{#if label}}
        <label for="{{id}}" class="form-item__label">
            {{label}}
            {{#if required}}
            *
            {{/if}}
        </label>
    {{/if}}

    <textarea id="{{id}}" placeholder="{{placeholder}}" class="textarea__input" {{#if required}}required{{/if}} {{{getattributes attr}}} {{#if disabled}}disabled{{/if}}></textarea>

    {{#if errorMsg}}
        <div class="form-item__error-msg">{{errorMsg}}</div>
    {{/if}}
</div>
 
{
  "label": "Textfield",
  "id": "textfield",
  "placeholder": "Messages",
  "errorMsg": "Här gick det fel",
  "attr": {
    "aria-invalid": true
  }
}
  • Content: 
    %text-area {
    display: block;
    background-color: $color-input-background;
    border: 1px solid $color-input-border;
    width: 100%;
    padding: size(2);
    min-height: 130px;
    resize: none;
    margin-bottom: size(2);

    &[aria-invalid='true'], &.error {
        border-color: $color-input-color-error;
        background: $color-input-background-error;

        &::placeholder {
            color: $color-error;
        }
    }

    &:disabled {
        border-color: $color-input-border-disabled;
        background: $color-input-background-disabled;

        &::placeholder {
            color: $color-input-color-disabled;
        }
    }
}

.textarea__input {
    @extend %text-area;
}
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/components/form/textarea/textarea.scss
  • Size: 706 Bytes

No notes defined.