Textfield

Preview
HTML
View
Context
Assets
Info


        
        
        <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 icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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"
  }
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--default
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon
Referenced by (33): @cell-edit, @checkout-form, @filefield, @filefield--multiple, @filefield--invalid, @filefield--disabled, @filefield--hidden-label, @radio, @radio--disabled, @radio--checked, @radio--checked-disabled, @radio--blue-border, @select, @select--placeholder, @select--empty-placeholder, @select--multiple, @select--search, @select--invalid, @select--disabled, @select--hidden-label, @textarea, @textarea--invalid, @textarea--disabled, @textarea--hidden-label, @pickup-method, @search, @form, @new-object-modal, @password-form, @view-return, @view-return--step-1, @view-return--step-2, @view-return--step-3


        
        
        <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 icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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"
  }
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--invalid
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon

Disabled

Preview
HTML
View
Context
Assets
Info


        
        
        <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 icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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"
  }
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--disabled
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon

With Left Icon

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="textfield textfield--icon-left">
    <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">
        <svg class="icon  textfield__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
        </svg>
    </div>
</div>


        {% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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",
    "icon": "search",
    "iconPosition": "left"
  }
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--with-left-icon
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon

With Right Icon

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="textfield textfield--icon-right">
    <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">
        <svg class="icon  textfield__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
        </svg>
    </div>
</div>


        {% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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",
    "icon": "search",
    "iconPosition": "right"
  }
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--with-right-icon
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon

Hidden Label

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="textfield">
    <label class="textfield__label  h-visually-hidden" 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 icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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",
    "isLabelHidden": true
  }
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--hidden-label
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon

Search

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="textfield textfield--search">
    <label class="textfield__label  h-visually-hidden" for="search">
        search
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="search" name="search" placeholder="Search">
    </div>
</div>


        {% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default('right')) %}
{% set isLabelHidden = data.isLabelHidden or 'textfield--search' in modifier ? 'h-visually-hidden' %}

{% set BEM -%}
    textfield
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
    {%- if icon %} textfield--icon-{{ iconPosition }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <label class="textfield__label {{ labelClass }} {{ isLabelHidden }}" for="{{ data.id }}">
        {{ data.label }}
    </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 %}
        {% if icon %}
            {% include '@icon' with { class: 'textfield__icon', name: icon } %}
        {% 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": "search",
    "id": "search",
    "name": "search",
    "placeholder": "Search"
  },
  "modifier": "textfield--search"
}

File:

Content:


                                .textfield {
    position: relative;
    width: 100%;

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

.textfield__inner {
    position: relative;
}

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

    font-size: 14px;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text-black;
}

.textfield__label--required {
    display: flex;

    &::after {
        content: '*';
        display: block;
        color: $L-error-text;
        margin-left: 3px;
    }
}

.textfield__input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 40px 4px 8px;
    min-height: 40px;

    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: left;
    color: $L-text;

    border-radius: 4px;
    background-color: $L-background-weak;
    border: 1px solid transparent;
    box-shadow: $elevation-01;

    appearance: none;
    transition: border-color $transition-duration $transition-easing;

    @include bp(lg-min) {
        min-height: 48px;
    }

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

    &::placeholder {
        color: $L-text-medium;
        font-size: $font-size-small;
        letter-spacing: $letter-spacing-50;
    }

    &:hover,
    &:focus {
        outline: none;
        border-color: $L-border-hover;
    }

    .textfield.is-invalid & {
        border-color: $L-error-border;
    }

    .textfield.is-disabled & {
        background-color: transparent;
        outline: none;
        border-color: $L-border;
    }

    .textfield--icon-left & {
        padding-left: 44px;
    }

    .textfield--icon-right & {
        padding-right: 44px;
    }

    .textfield--search & {
        background: transparent;
        border: none;
        font-size: $font-size-large;
        line-height: $line-height-large;
        padding: 0 24px 0 0;
        height: auto;
    }
}

.textfield__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;

    .textfield--icon-left & {
        left: 16px;
    }

    .textfield--icon-right & {
        right: 16px;
    }
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-error-text;
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: $L-text;
}

URL: /components/raw/textfield/textfield.scss
Filesystem Path: src/patterns/components/forms/textfield/textfield.scss
Size: 2.4 KB

Content:
import './textfield.scss';
URL: /components/raw/textfield/textfield.ts
Filesystem Path: src/patterns/components/forms/textfield/textfield.ts
Size: 27 Bytes

Handle: @textfield--search
Filesystem Path: src/patterns/components/forms/textfield/textfield.twig
References (1): @icon

Invalid

Disabled

With Left Icon

With Right Icon

Hidden Label

Search

Filter

Forms

Notifications

Search

Return

CMS

Copy environment

Textfield

Invalid

Disabled

With Left Icon

With Right Icon

Hidden Label

Search