Input

Theme:

Ready

Notes
View
Info
HTML
Context
Assets

There are no notes for this item.


        {% set isOptionElement = type == 'radio' or type == 'checkbox' %}
{% if isOptionElement %}
<div class="{{ type ~ (modifierWrapper ? ' ' ~ modifierWrapper : '') }}">
{% endif %}

  <input type="{{ type }}" id="{{ id }}"
    {% if ariaDescribedBy %}
      aria-describedby="{{ ariaDescribedBy }}"
    {% endif %}
    {% if name %}
      name="{{ name }}"
    {% endif %}
    {% if value %}
      value="{{ value }}"
    {% endif %}
    {% if type %}
      class="{{ type ~ (modifier ? ' ' ~ modifier : '') }}"
    {% endif %}
    {% if disabled %}
      disabled="disabled"
    {% endif %}
    {% if placeholder %}
      placeholder="{{ placeholder }}"
    {% endif %}
    {% if required %}
      required="{{ required }}"
    {% endif %}
    {% if invalid %}
      aria-invalid="{{ invalid }}"
    {% endif %}
  />
  {% if isOptionElement %}
  <label for="{{ id }}">{{ label }}</label>
</div>
{% endif %}

Handle: @input
Variants (37): Text , Email , Password , Number , Date , Tel , Url , Radio , Checkbox , Search , Text Error , Email Error , Password Error , Number Error , Date Error , Tel Error , Url Error , Radio Error , Checkbox Error , Text Success , Email Success , Password Success , Number Success , Date Success , Tel Success , Url Success , Radio Success , Checkbox Success , Text Disabled True , Email Disabled True , Password Disabled True , Number Disabled True , Date Disabled True , Tel Disabled True , Url Disabled True , Radio Disabled True , Checkbox Disabled True
Preview:
- With layout
- Component only
Filesystem Path: components/21-atoms/input/input.twig
Referenced by (11): @checkboxes, @checkboxes--with-error, @checkboxes--with-success, @checkboxes-with-filter, @checkboxes-with-filter--with-error, @checkboxes-with-filter--with-success, @radios, @radios--with-error, @radios--with-success, @search, @subscribe


        
        
            <!-- Text -->
<input type="text" id="text" name="input_name" class="text" />


        
            <!-- Email -->
<input type="email" id="email" name="input_name" class="email" />


        
            <!-- Password -->
<input type="password" id="password" name="input_name" class="password" />


        
            <!-- Number -->
<input type="number" id="number" name="input_name" class="number" />


        
            <!-- Date -->
<input type="date" id="date" name="input_name" class="date" />


        
            <!-- Tel -->
<input type="tel" id="tel" name="input_name" class="tel" />


        
            <!-- Url -->
<input type="url" id="url" name="input_name" class="url" />


        
            <!-- Radio -->
<div class="radio">

    <input type="radio" id="radio" name="input_name" class="radio" />
    <label for="radio">input type radio</label>
</div>


        
            <!-- Checkbox -->
<div class="checkbox">

    <input type="checkbox" id="checkbox" name="input_name" class="checkbox" />
    <label for="checkbox">input type checkbox</label>
</div>


        
            <!-- Search -->
<input type="search" id="search" name="input_name" class="search" placeholder="search placeholder" />


        
            <!-- Text Error -->
<input type="text" id="text--error" name="input_name" class="text error" />


        
            <!-- Email Error -->
<input type="email" id="email--error" name="input_name" class="email error" />


        
            <!-- Password Error -->
<input type="password" id="password--error" name="input_name" class="password error" />


        
            <!-- Number Error -->
<input type="number" id="number--error" name="input_name" class="number error" />


        
            <!-- Date Error -->
<input type="date" id="date--error" name="input_name" class="date error" />


        
            <!-- Tel Error -->
<input type="tel" id="tel--error" name="input_name" class="tel error" />


        
            <!-- Url Error -->
<input type="url" id="url--error" name="input_name" class="url error" />


        
            <!-- Radio Error -->
<div class="radio">

    <input type="radio" id="radio--error" name="input_name" class="radio error" />
    <label for="radio--error">input type radio</label>
</div>


        
            <!-- Checkbox Error -->
<div class="checkbox">

    <input type="checkbox" id="checkbox--error" name="input_name" class="checkbox error" />
    <label for="checkbox--error">input type checkbox</label>
</div>


        
            <!-- Text Success -->
<input type="text" id="text--success" name="input_name" class="text success" />


        
            <!-- Email Success -->
<input type="email" id="email--success" name="input_name" class="email success" />


        
            <!-- Password Success -->
<input type="password" id="password--success" name="input_name" class="password success" />


        
            <!-- Number Success -->
<input type="number" id="number--success" name="input_name" class="number success" />


        
            <!-- Date Success -->
<input type="date" id="date--success" name="input_name" class="date success" />


        
            <!-- Tel Success -->
<input type="tel" id="tel--success" name="input_name" class="tel success" />


        
            <!-- Url Success -->
<input type="url" id="url--success" name="input_name" class="url success" />


        
            <!-- Radio Success -->
<div class="radio">

    <input type="radio" id="radio--success" name="input_name" class="radio success" />
    <label for="radio--success">input type radio</label>
</div>


        
            <!-- Checkbox Success -->
<div class="checkbox">

    <input type="checkbox" id="checkbox--success" name="input_name" class="checkbox success" />
    <label for="checkbox--success">input type checkbox</label>
</div>


        
            <!-- Text Disabled True -->
<input type="text" id="text--disabled-true" name="input_name" class="text" disabled="disabled" />


        
            <!-- Email Disabled True -->
<input type="email" id="email--disabled-true" name="input_name" class="email" disabled="disabled" />


        
            <!-- Password Disabled True -->
<input type="password" id="password--disabled-true" name="input_name" class="password" disabled="disabled" />


        
            <!-- Number Disabled True -->
<input type="number" id="number--disabled-true" name="input_name" class="number" disabled="disabled" />


        
            <!-- Date Disabled True -->
<input type="date" id="date--disabled-true" name="input_name" class="date" disabled="disabled" />


        
            <!-- Tel Disabled True -->
<input type="tel" id="tel--disabled-true" name="input_name" class="tel" disabled="disabled" />


        
            <!-- Url Disabled True -->
<input type="url" id="url--disabled-true" name="input_name" class="url" disabled="disabled" />


        
            <!-- Radio Disabled True -->
<div class="radio">

    <input type="radio" id="radio--disabled-true" name="input_name" class="radio" disabled="disabled" />
    <label for="radio--disabled-true">input type radio</label>
</div>


        
            <!-- Checkbox Disabled True -->
<div class="checkbox">

    <input type="checkbox" id="checkbox--disabled-true" name="input_name" class="checkbox" disabled="disabled" />
    <label for="checkbox--disabled-true">input type checkbox</label>
</div>


        
        
            /* Text */
{
  "name": "input_name",
  "type": "text",
  "label": "input type text",
  "id": "text",
  "modifier": null,
  "disabled": null
}


        
            /* Email */
{
  "name": "input_name",
  "type": "email",
  "label": "input type email",
  "id": "email",
  "modifier": null,
  "disabled": null
}


        
            /* Password */
{
  "name": "input_name",
  "type": "password",
  "label": "input type password",
  "id": "password",
  "modifier": null,
  "disabled": null
}


        
            /* Number */
{
  "name": "input_name",
  "type": "number",
  "label": "input type number",
  "id": "number",
  "modifier": null,
  "disabled": null
}


        
            /* Date */
{
  "name": "input_name",
  "type": "date",
  "label": "input type date",
  "id": "date",
  "modifier": null,
  "disabled": null
}


        
            /* Tel */
{
  "name": "input_name",
  "type": "tel",
  "label": "input type tel",
  "id": "tel",
  "modifier": null,
  "disabled": null
}


        
            /* Url */
{
  "name": "input_name",
  "type": "url",
  "label": "input type url",
  "id": "url",
  "modifier": null,
  "disabled": null
}


        
            /* Radio */
{
  "name": "input_name",
  "type": "radio",
  "label": "input type radio",
  "id": "radio",
  "modifier": null,
  "disabled": null
}


        
            /* Checkbox */
{
  "name": "input_name",
  "type": "checkbox",
  "label": "input type checkbox",
  "id": "checkbox",
  "modifier": null,
  "disabled": null
}


        
            /* Search */
{
  "name": "input_name",
  "type": "search",
  "label": "input type search",
  "id": "search",
  "placeholder": "search placeholder"
}


        
            /* Text Error */
{
  "name": "input_name",
  "type": "text",
  "label": "input type text",
  "id": "text--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Email Error */
{
  "name": "input_name",
  "type": "email",
  "label": "input type email",
  "id": "email--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Password Error */
{
  "name": "input_name",
  "type": "password",
  "label": "input type password",
  "id": "password--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Number Error */
{
  "name": "input_name",
  "type": "number",
  "label": "input type number",
  "id": "number--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Date Error */
{
  "name": "input_name",
  "type": "date",
  "label": "input type date",
  "id": "date--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Tel Error */
{
  "name": "input_name",
  "type": "tel",
  "label": "input type tel",
  "id": "tel--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Url Error */
{
  "name": "input_name",
  "type": "url",
  "label": "input type url",
  "id": "url--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Radio Error */
{
  "name": "input_name",
  "type": "radio",
  "label": "input type radio",
  "id": "radio--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Checkbox Error */
{
  "name": "input_name",
  "type": "checkbox",
  "label": "input type checkbox",
  "id": "checkbox--error",
  "modifier": "error",
  "disabled": null
}


        
            /* Text Success */
{
  "name": "input_name",
  "type": "text",
  "label": "input type text",
  "id": "text--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Email Success */
{
  "name": "input_name",
  "type": "email",
  "label": "input type email",
  "id": "email--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Password Success */
{
  "name": "input_name",
  "type": "password",
  "label": "input type password",
  "id": "password--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Number Success */
{
  "name": "input_name",
  "type": "number",
  "label": "input type number",
  "id": "number--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Date Success */
{
  "name": "input_name",
  "type": "date",
  "label": "input type date",
  "id": "date--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Tel Success */
{
  "name": "input_name",
  "type": "tel",
  "label": "input type tel",
  "id": "tel--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Url Success */
{
  "name": "input_name",
  "type": "url",
  "label": "input type url",
  "id": "url--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Radio Success */
{
  "name": "input_name",
  "type": "radio",
  "label": "input type radio",
  "id": "radio--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Checkbox Success */
{
  "name": "input_name",
  "type": "checkbox",
  "label": "input type checkbox",
  "id": "checkbox--success",
  "modifier": "success",
  "disabled": null
}


        
            /* Text Disabled True */
{
  "name": "input_name",
  "type": "text",
  "label": "input type text",
  "id": "text--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Email Disabled True */
{
  "name": "input_name",
  "type": "email",
  "label": "input type email",
  "id": "email--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Password Disabled True */
{
  "name": "input_name",
  "type": "password",
  "label": "input type password",
  "id": "password--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Number Disabled True */
{
  "name": "input_name",
  "type": "number",
  "label": "input type number",
  "id": "number--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Date Disabled True */
{
  "name": "input_name",
  "type": "date",
  "label": "input type date",
  "id": "date--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Tel Disabled True */
{
  "name": "input_name",
  "type": "tel",
  "label": "input type tel",
  "id": "tel--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Url Disabled True */
{
  "name": "input_name",
  "type": "url",
  "label": "input type url",
  "id": "url--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Radio Disabled True */
{
  "name": "input_name",
  "type": "radio",
  "label": "input type radio",
  "id": "radio--disabled-true",
  "modifier": null,
  "disabled": true
}


        
            /* Checkbox Disabled True */
{
  "name": "input_name",
  "type": "checkbox",
  "label": "input type checkbox",
  "id": "checkbox--disabled-true",
  "modifier": null,
  "disabled": true
}

File:

Content:


                                input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="email"],
input[type="url"] {
  @include field-base;
}

input[type="password"] {
  [class*="cs--"] & {
    &,
    &:focus {
      padding-right: $field-icon-padding;
      background-image: svg-as-background('lock-closed', color('dark-gray'), 30, 26);
      background-repeat: no-repeat;
      background-position: right .75rem center;

      &:disabled {
        background-image: svg-as-background('lock-closed', color('dark-gray', -2), 30, 26);
      }
    }
  }
}

// Fixes vertical alignment on mobile safari.
input[type=date] {
  line-height: 2.4rem;
}

input[type=date]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
  margin-left: .5rem;
  -webkit-appearance: none;  // sass-lint:disable-line no-vendor-prefixes
}

.radio {
  @include choices-field-base('radio');

  &:hover {
    // Unchecked and hovered.
    label::before {
      @include theme('background-color', 'color-tertiary--lighten-4', 'radio-background-color-hover');
      @include theme('border-color', 'color-tertiary--lighten-1', 'radio-border-color-hover');
    }

    // Checked and hovered.
    input[type="radio"]:checked + label::before {
      @include theme('background-color', 'color-tertiary--lighten-3', 'radio-background-color-hover-and-checked');
      @include theme('border-color', 'color-tertiary--darken-3', 'radio-border-color-hover-and-checked');
      @include theme('color', 'color-tertiary--darken-3', 'radio-color-hover-and-checked');
    }
  }

  &:focus + label,
  input[type="radio"]:focus + label {
    @include focus-bare;
  }
}

.checkbox {
  @include choices-field-base('checkbox');

  &:hover {
    // Unchecked and hovered.
    label::before {
      @include theme('background-color', 'color-tertiary--lighten-4', 'checkbox-background-color-hover');
      @include theme('border-color', 'color-tertiary--lighten-1', 'checkbox-border-color-hover');
    }

    // Checked and hovered.
    input[type="checkbox"]:checked + label::before {
      @include theme('background-color', 'color-tertiary--lighten-3', 'checkbox-background-color-hover-and-checked');
      @include theme('border-color', 'color-tertiary--darken-2', 'checkbox-border-color-hover-and-checked');
      @include theme('color', 'color-tertiary--darken-3', 'checkbox-color-hover-and-checked');
    }
  }

  &:focus + label,
  input[type="checkbox"]:focus + label {
    @include focus-bare;
  }
}

URL: /components/raw/input/_input.scss
Filesystem Path: components/21-atoms/input/_input.scss
Size: 2.5 KB