Form Textarea

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<div class="formTextarea is-optional">

    <label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>

    <textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


        
            <!-- Required -->
<div class="formTextarea is-required">

    <label class="label is-required" for="field-uniqueID-required">Pflichtfeld</label>

    <textarea class="formTextarea-field" id="field-uniqueID-required" name="required" placeholder="Aufforderung Nachricht zu schreiben" required="">Erfolgreich geprüftes Feld</textarea>

    <div class="formMessage js-formValidator-message">
        Ich bin erfolgreich geprüft.
    </div>

</div>


        
            <!-- Valid -->
<div class="formTextarea is-required" data-invalid="false">

    <label class="label is-required" data-invalid="false" for="field-uniqueID-valid">Pflichtfeld</label>

    <textarea class="formTextarea-field" id="field-uniqueID-valid" name="valid" placeholder="Aufforderung Nachricht zu schreiben" required="">Erfolgreich geprüftes Feld</textarea>

    <div class="formMessage js-formValidator-message">
        Ich bin erfolgreich geprüft.
    </div>

</div>


        
            <!-- Invalid -->
<div class="formTextarea is-required" data-invalid="true">

    <label class="label is-required" data-invalid="true" for="field-uniqueID-invalid">Pflichtfeld</label>

    <textarea class="formTextarea-field" id="field-uniqueID-invalid" name="invalid" placeholder="Aufforderung Nachricht zu schreiben" required="">Beanstandetes Feld</textarea>

    <div class="formMessage js-formValidator-message">
        Ich bin die Fehlerbeschreibung.
    </div>

</div>


        
            <!-- Disabled -->
<div class="formTextarea is-optional is-disabled">

    <label class="label is-optional" data-disabled="true" for="field-uniqueID-disabled">Disabled</label>

    <textarea class="formTextarea-field" id="field-uniqueID-disabled" name="disabled" placeholder="Aufforderung Nachricht zu schreiben" disabled="disabled">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.
</textarea>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können nicht geändert werden.
    </div>

</div>


        
            <!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div class="formTextarea is-optional">

        <label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>

        <textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>

        <div class="formMessage js-formValidator-message">
            Ich bin ein Hinweis.
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Required</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div class="formTextarea is-required">

        <label class="label is-required" for="field-uniqueID-required">Pflichtfeld</label>

        <textarea class="formTextarea-field" id="field-uniqueID-required" name="required" placeholder="Aufforderung Nachricht zu schreiben" required="">Erfolgreich geprüftes Feld</textarea>

        <div class="formMessage js-formValidator-message">
            Ich bin erfolgreich geprüft.
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Valid</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div class="formTextarea is-required" data-invalid="false">

        <label class="label is-required" data-invalid="false" for="field-uniqueID-valid">Pflichtfeld</label>

        <textarea class="formTextarea-field" id="field-uniqueID-valid" name="valid" placeholder="Aufforderung Nachricht zu schreiben" required="">Erfolgreich geprüftes Feld</textarea>

        <div class="formMessage js-formValidator-message">
            Ich bin erfolgreich geprüft.
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Invalid</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div class="formTextarea is-required" data-invalid="true">

        <label class="label is-required" data-invalid="true" for="field-uniqueID-invalid">Pflichtfeld</label>

        <textarea class="formTextarea-field" id="field-uniqueID-invalid" name="invalid" placeholder="Aufforderung Nachricht zu schreiben" required="">Beanstandetes Feld</textarea>

        <div class="formMessage js-formValidator-message">
            Ich bin die Fehlerbeschreibung.
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Disabled</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div class="formTextarea is-optional is-disabled">

        <label class="label is-optional" data-disabled="true" for="field-uniqueID-disabled">Disabled</label>

        <textarea class="formTextarea-field" id="field-uniqueID-disabled" name="disabled" placeholder="Aufforderung Nachricht zu schreiben" disabled="disabled">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.
</textarea>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können nicht geändert werden.
        </div>

    </div>

</section>

Handle: @formtextarea
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/formFragments/formTextarea/formTextarea.html
References (3): @label, @formmessage, @formtextarea
Referenced by (9): @formfieldset, @formfieldset--with-notes, @formfieldset--without-legend, @formfieldset--with-buttons, @formtextarea--required, @formtextarea--valid, @formtextarea--invalid, @formtextarea--disabled, @formtextarea--doc-only


        <!-- Default -->
<div class="formTextarea{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    {{> @label}}

    <textarea class="formTextarea-field" id="field-{{id}}" name="{{name}}" placeholder="{{{placeholder}}}"{{#is-disabled}} disabled="disabled"{{/is-disabled}}{{#is-required}} required=""{{/is-required}}>{{{value}}}</textarea>

    {{#message}}
        {{render '@formmessage' (contextData '@formtextarea' this) merge=true}}
    {{/message}}

</div>

<!-- Required -->
<div class="formTextarea{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    {{> @label}}

    <textarea class="formTextarea-field" id="field-{{id}}" name="{{name}}" placeholder="{{{placeholder}}}"{{#is-disabled}} disabled="disabled"{{/is-disabled}}{{#is-required}} required=""{{/is-required}}>{{{value}}}</textarea>

    {{#message}}
        {{render '@formmessage' (contextData '@formtextarea' this) merge=true}}
    {{/message}}

</div>

<!-- Valid -->
<div class="formTextarea{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    {{> @label}}

    <textarea class="formTextarea-field" id="field-{{id}}" name="{{name}}" placeholder="{{{placeholder}}}"{{#is-disabled}} disabled="disabled"{{/is-disabled}}{{#is-required}} required=""{{/is-required}}>{{{value}}}</textarea>

    {{#message}}
        {{render '@formmessage' (contextData '@formtextarea' this) merge=true}}
    {{/message}}

</div>

<!-- Invalid -->
<div class="formTextarea{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    {{> @label}}

    <textarea class="formTextarea-field" id="field-{{id}}" name="{{name}}" placeholder="{{{placeholder}}}"{{#is-disabled}} disabled="disabled"{{/is-disabled}}{{#is-required}} required=""{{/is-required}}>{{{value}}}</textarea>

    {{#message}}
        {{render '@formmessage' (contextData '@formtextarea' this) merge=true}}
    {{/message}}

</div>

<!-- Disabled -->
<div class="formTextarea{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    {{> @label}}

    <textarea class="formTextarea-field" id="field-{{id}}" name="{{name}}" placeholder="{{{placeholder}}}"{{#is-disabled}} disabled="disabled"{{/is-disabled}}{{#is-required}} required=""{{/is-required}}>{{{value}}}</textarea>

    {{#message}}
        {{render '@formmessage' (contextData '@formtextarea' this) merge=true}}
    {{/message}}

</div>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifier}}
            <ul data-label="Modifier">
                    {{#modifier}}
                <li>{{{.}}}</li>
                    {{/modifier}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#samples}}
        {{render '@formtextarea' (contextData '@formtextarea' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}


        
        
            /* Default */
{
  "id": "uniqueID-textarea",
  "name": "textarea",
  "label": "Textfeld",
  "placeholder": "Aufforderung Nachricht zu schreiben",
  "message": {
    "content": "Ich bin ein Hinweis."
  }
}


        
            /* Required */
{
  "id": "uniqueID-required",
  "name": "required",
  "label": "Pflichtfeld",
  "placeholder": "Aufforderung Nachricht zu schreiben",
  "message": {
    "content": "Ich bin erfolgreich geprüft."
  },
  "is-required": true,
  "value": "Erfolgreich geprüftes Feld"
}


        
            /* Valid */
{
  "id": "uniqueID-valid",
  "name": "valid",
  "label": "Pflichtfeld",
  "placeholder": "Aufforderung Nachricht zu schreiben",
  "message": {
    "content": "Ich bin erfolgreich geprüft."
  },
  "is-required": true,
  "is-valid": "uniqueID-true",
  "value": "Erfolgreich geprüftes Feld"
}


        
            /* Invalid */
{
  "id": "uniqueID-invalid",
  "name": "invalid",
  "label": "Pflichtfeld",
  "placeholder": "Aufforderung Nachricht zu schreiben",
  "message": {
    "content": "Ich bin die Fehlerbeschreibung."
  },
  "is-required": true,
  "is-invalid": "uniqueID-true",
  "value": "Beanstandetes Feld"
}


        
            /* Disabled */
{
  "id": "uniqueID-disabled",
  "name": "disabled",
  "label": "Disabled",
  "placeholder": "Aufforderung Nachricht zu schreiben",
  "message": {
    "content": "Dieses Angaben können nicht geändert werden."
  },
  "is-disabled": true,
  "value": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.\n"
}


        
            /* Doc Only */
{
  "id": "uniqueID-textarea",
  "name": "textarea",
  "label": "Textfeld",
  "placeholder": "Aufforderung Nachricht zu schreiben",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "variants": [
    {
      "title": "Default",
      "samples": {
        "id": "uniqueID-textarea",
        "name": "textarea",
        "label": "Textfeld",
        "placeholder": "Aufforderung Nachricht zu schreiben",
        "message": {
          "content": "Ich bin ein Hinweis."
        }
      }
    },
    {
      "title": "Required",
      "samples": {
        "id": "uniqueID-required",
        "name": "required",
        "label": "Pflichtfeld",
        "placeholder": "Aufforderung Nachricht zu schreiben",
        "message": {
          "content": "Ich bin erfolgreich geprüft."
        },
        "is-required": true,
        "value": "Erfolgreich geprüftes Feld"
      }
    },
    {
      "title": "Valid",
      "samples": {
        "id": "uniqueID-valid",
        "name": "valid",
        "label": "Pflichtfeld",
        "placeholder": "Aufforderung Nachricht zu schreiben",
        "message": {
          "content": "Ich bin erfolgreich geprüft."
        },
        "is-required": true,
        "is-valid": "uniqueID-true",
        "value": "Erfolgreich geprüftes Feld"
      }
    },
    {
      "title": "Invalid",
      "samples": {
        "id": "uniqueID-invalid",
        "name": "invalid",
        "label": "Pflichtfeld",
        "placeholder": "Aufforderung Nachricht zu schreiben",
        "message": {
          "content": "Ich bin die Fehlerbeschreibung."
        },
        "is-required": true,
        "is-invalid": "uniqueID-true",
        "value": "Beanstandetes Feld"
      }
    },
    {
      "title": "Disabled",
      "samples": {
        "id": "uniqueID-disabled",
        "name": "disabled",
        "label": "Disabled",
        "placeholder": "Aufforderung Nachricht zu schreiben",
        "message": {
          "content": "Dieses Angaben können nicht geändert werden."
        },
        "is-disabled": true,
        "value": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.\n"
      }
    }
  ]
}

File:

Content:


                                @import "_formTextarea.settings";
@import "_formTextarea.styles";

URL: /components/raw/formtextarea/_formTextarea.scss
Filesystem Path: components/03-fragments/formFragments/formTextarea/_formTextarea.scss
Size: 66 Bytes

Content:
$formTextarea_lines: 4 !default;
URL: /components/raw/formtextarea/_formTextarea.settings.scss
Filesystem Path: components/03-fragments/formFragments/formTextarea/_formTextarea.settings.scss
Size: 33 Bytes

Content:


                                %formTextarea {
    @include stack-spacing();
    @include field-stacking();

    .label {
        margin-top: 0;
    }

    &-field {
        @extend %field;
        margin-top: 0;

        min-width: 100%;
        max-width: 100%;

        resize: vertical;

        display: block;
        width: 100%;

        min-height: ($formTextarea_lines * 1em * $field_line-height + 2 * nth($field_padding, 1));
    }

    &[data-invalid="false"] &-field,
    &[aria-invalid="false"] &-field {

        &:not(:focus) {
            @include state-styles($field_states, valid);
        }

    }

    &[data-invalid="true"] &-field,
    &[aria-invalid="true"] &-field {

        &:not(:focus) {
            @include state-styles($field_states, invalid);
        }

    }

    &[disabled] &-field {
        $styles: get-state-styles($field_states, disabled);

        @include styles($styles);
        cursor: default;

        &::placeholder {
            @include styles($styles, color);
        }

    }

}

.formTextarea {
    @extend %formTextarea;

    &-field {
        @extend %formTextarea-field;
    }

}

URL: /components/raw/formtextarea/_formTextarea.styles.scss
Filesystem Path: components/03-fragments/formFragments/formTextarea/_formTextarea.styles.scss
Size: 1.1 KB