Copy environment

Textfield 

<div class="textfield
    ">
    <label class="textfield__label " for="text1">
        Textfield label </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="textfield" placeholder="Placeholder text">
    </div>
</div>
 
{% set BEM -%}
    textfield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }}" for="{{ data.id }}">
        {{ data.label }}{% if data.required %}*{% endif %}
    </label>
    <div class="textfield__inner">
        {% if input %}
            {{ input }}
        {% else %}
            <input
                class="textfield__input"
                type="{{ type|default(data.type|default('text')) }}"
                id="{{ data.id }}"
                name="{{ data.name }}"
                {{ data.value ? 'value="' ~ data.value ~ '"' : '' }}
                {{ data.placeholder ? 'placeholder="' ~ data.placeholder ~ '"' : '' }}
                {% if data.isDisabled %}disabled{% endif %}
                {{ data.attributes }}
            >
        {% endif %}
    </div>
    {% if data.error %}
        <div class="textfield__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="textfield__description">
            {{ data.description }}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1",
    "name": "textfield",
    "placeholder": "Placeholder text"
  }
}
  • Content: 
    .textfield {
    position: relative;
    width: 100%;

    &.is-disabled {
        opacity: .5;
    }
}

.textfield__inner {
    padding-bottom: 4px;
    position: relative;
}

.textfield__label {
    display: block;
    width: 100%;
    margin-bottom: 10px;

    text-align: left;
    color: $color-text-01;
}

.gfield.hidden_label .textfield__label {
    @include visually-hidden;
}

.textfield__input {
    display: block;
    width: 100%;
    height: 62px;
    margin: 0;
    padding: 0;
    font-size: $font-size-h3-xs;
    font-weight: $font-weight-medium;
    line-height: 1.31;
    text-align: left;
    color: $color-text-01;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: 0 1px 0 0 $color-text-01;
    appearance: none;
    transition-property: box-shadow;
    transition-timing-function: $transition-easing-in;
    transition-duration: $transition-duration;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
    }

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

    &::placeholder {
        color: $color-text-02;
    }

    &:hover,
    &:focus {
        outline: none;
        box-shadow: 0 2px 0 0 $color-text-01;
        transition-timing-function: $transition-easing-out;
    }

    .textfield.is-disabled & {
        outline: none;
        box-shadow: 0 1px 0 0 $color-text-01;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }
}

.textfield__error {
    margin-top: 4px;
    font-size: $font-size-small;
    color: $color-support-error;
}

.textfield__description {
    margin-top: 4px;
    font-size: $font-size-small;
    color: $color-text-02;
}
  • URL: /components/raw/textfield/textfield.scss
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
  • Size: 1.7 KB

Invalid 

<div class="textfield
     is-invalid">
    <label class="textfield__label " for="text1">
        Textfield label </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="textfield" value="info2play.ee" placeholder="Placeholder text">
    </div>
    <div class="textfield__error">
        Please check your input
    </div>
    <div class="textfield__description">
        Helper text here
    </div>
</div>
 
{% set BEM -%}
    textfield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }}" for="{{ data.id }}">
        {{ data.label }}{% if data.required %}*{% endif %}
    </label>
    <div class="textfield__inner">
        {% if input %}
            {{ input }}
        {% else %}
            <input
                class="textfield__input"
                type="{{ type|default(data.type|default('text')) }}"
                id="{{ data.id }}"
                name="{{ data.name }}"
                {{ data.value ? 'value="' ~ data.value ~ '"' : '' }}
                {{ data.placeholder ? 'placeholder="' ~ data.placeholder ~ '"' : '' }}
                {% if data.isDisabled %}disabled{% endif %}
                {{ data.attributes }}
            >
        {% endif %}
    </div>
    {% if data.error %}
        <div class="textfield__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="textfield__description">
            {{ data.description }}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1",
    "name": "textfield",
    "placeholder": "Placeholder text",
    "isInvalid": true,
    "error": "Please check your input",
    "value": "info2play.ee",
    "description": "Helper text here"
  }
}
  • Content: 
    .textfield {
    position: relative;
    width: 100%;

    &.is-disabled {
        opacity: .5;
    }
}

.textfield__inner {
    padding-bottom: 4px;
    position: relative;
}

.textfield__label {
    display: block;
    width: 100%;
    margin-bottom: 10px;

    text-align: left;
    color: $color-text-01;
}

.gfield.hidden_label .textfield__label {
    @include visually-hidden;
}

.textfield__input {
    display: block;
    width: 100%;
    height: 62px;
    margin: 0;
    padding: 0;
    font-size: $font-size-h3-xs;
    font-weight: $font-weight-medium;
    line-height: 1.31;
    text-align: left;
    color: $color-text-01;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: 0 1px 0 0 $color-text-01;
    appearance: none;
    transition-property: box-shadow;
    transition-timing-function: $transition-easing-in;
    transition-duration: $transition-duration;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
    }

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

    &::placeholder {
        color: $color-text-02;
    }

    &:hover,
    &:focus {
        outline: none;
        box-shadow: 0 2px 0 0 $color-text-01;
        transition-timing-function: $transition-easing-out;
    }

    .textfield.is-disabled & {
        outline: none;
        box-shadow: 0 1px 0 0 $color-text-01;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }
}

.textfield__error {
    margin-top: 4px;
    font-size: $font-size-small;
    color: $color-support-error;
}

.textfield__description {
    margin-top: 4px;
    font-size: $font-size-small;
    color: $color-text-02;
}
  • URL: /components/raw/textfield/textfield.scss
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
  • Size: 1.7 KB
  • Handle: @textfield--invalid
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.twig

Disabled 

<div class="textfield
     is-disabled">
    <label class="textfield__label " for="text1">
        Textfield label </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="textfield" value="Tere" placeholder="Placeholder text" disabled>
    </div>
</div>
 
{% set BEM -%}
    textfield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }}" for="{{ data.id }}">
        {{ data.label }}{% if data.required %}*{% endif %}
    </label>
    <div class="textfield__inner">
        {% if input %}
            {{ input }}
        {% else %}
            <input
                class="textfield__input"
                type="{{ type|default(data.type|default('text')) }}"
                id="{{ data.id }}"
                name="{{ data.name }}"
                {{ data.value ? 'value="' ~ data.value ~ '"' : '' }}
                {{ data.placeholder ? 'placeholder="' ~ data.placeholder ~ '"' : '' }}
                {% if data.isDisabled %}disabled{% endif %}
                {{ data.attributes }}
            >
        {% endif %}
    </div>
    {% if data.error %}
        <div class="textfield__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="textfield__description">
            {{ data.description }}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1",
    "name": "textfield",
    "placeholder": "Placeholder text",
    "isDisabled": true,
    "value": "Tere"
  }
}
  • Content: 
    .textfield {
    position: relative;
    width: 100%;

    &.is-disabled {
        opacity: .5;
    }
}

.textfield__inner {
    padding-bottom: 4px;
    position: relative;
}

.textfield__label {
    display: block;
    width: 100%;
    margin-bottom: 10px;

    text-align: left;
    color: $color-text-01;
}

.gfield.hidden_label .textfield__label {
    @include visually-hidden;
}

.textfield__input {
    display: block;
    width: 100%;
    height: 62px;
    margin: 0;
    padding: 0;
    font-size: $font-size-h3-xs;
    font-weight: $font-weight-medium;
    line-height: 1.31;
    text-align: left;
    color: $color-text-01;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: 0 1px 0 0 $color-text-01;
    appearance: none;
    transition-property: box-shadow;
    transition-timing-function: $transition-easing-in;
    transition-duration: $transition-duration;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
    }

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

    &::placeholder {
        color: $color-text-02;
    }

    &:hover,
    &:focus {
        outline: none;
        box-shadow: 0 2px 0 0 $color-text-01;
        transition-timing-function: $transition-easing-out;
    }

    .textfield.is-disabled & {
        outline: none;
        box-shadow: 0 1px 0 0 $color-text-01;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }
}

.textfield__error {
    margin-top: 4px;
    font-size: $font-size-small;
    color: $color-support-error;
}

.textfield__description {
    margin-top: 4px;
    font-size: $font-size-small;
    color: $color-text-02;
}
  • URL: /components/raw/textfield/textfield.scss
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
  • Size: 1.7 KB
  • Handle: @textfield--disabled
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.twig