Input element: Search

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="rtds-input has-icon">

    <svg class="rtds-icon rtds-fill-current rtds-input__icon" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--magnifying-glass" />
    </svg>

    <input id="" class="rtds-text-sm rtds-input-placeholder">
</div>


        <div class="rtds-input{% block size %}{% endblock size %}{% if hasError %} has-error{% endif %}{% if iconPlaceholder %} has-icon{% endif %}">
  {% set errorId = id ~ 'Error' %}
    {%- if iconPlaceholder %}
      {% render '@icon', {id: iconPlaceholder, classes: 'rtds-input__icon', size: ''}, true %}
    {% endif -%}
      <input
        id="{{ id }}"
        class="{% if padding %}{{ padding }} {% endif %}{% if radius %}{{ radius }} {% endif %}{% if border %}{{ border }} {% endif %}rtds-text-sm rtds-input-placeholder{% if classes %} {{ classes }}{% endif %}{% if iconAlert %} rtds-pr-12{% endif %}"
        {% if type %} type="{{ type }}"{% endif %}
        {% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
        {% if placeholder %} placeholder="{{ placeholder }}"{% endif %} 
        {% if fieldRequired %} aria-required="true"{% endif %}
        {% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}
        {% if ariaDescribedBy or hasErrorControl or fieldRequired %} aria-describedBy="
          {%- if hasErrorControl or fieldRequired -%}
          {{- errorId -}}
            {%- if ariaDescribedBy %} {{ ariaDescribedBy -}}{%- endif -%}
          {% elseif ariaDescribedBy -%}
          {{- ariaDescribedBy -}}
          {% endif %}"
        {% endif %}
        {% if ariaInvalid %} aria-invalid="true"{% endif %}
        >
      {%- if iconAlert %}
        {% render '@icon', {id: 'outline--exclamation-circle', classes: 'rtds-absolute rtds-right-4 rtds-content-placeholder rtds-content-error', size: 'rtds-w-6 rtds-h-6'}, true %}
      {% endif -%}
  </div>


        
            
            {
  "iconPlaceholder": "mini--magnifying-glass"
}

File:

Content:


                                /**
 * INPUT
 * 
 *
*/
@layer components {
    .rtds-input {
        @apply rtds-flex rtds-items-center rtds-relative;
    }

    .rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple],
    .rtds-input [type='file'],
    .rtds-input textarea {
        @apply rtds-w-full rtds-rounded-lg;
    }

    .rtds-input [type='file'] {
        @apply rtds-p-1;
    }

    .rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple],
    .rtds-input textarea {
        @apply rtds-py-2 rtds-px-3 rtds-border rtds-border-input;
    }

    .rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple] {
        @apply rtds-h-11;
    }

    /* ICON STYLES */
    .rtds-input__icon {
        @apply rtds-absolute rtds-left-4 rtds-content-placeholder rtds-w-6 rtds-h-6;
    }

    .rtds-input--sm .rtds-input__icon {
        @apply rtds-w-4 rtds-h-4 rtds-left-3;
    }

    .rtds-input--lg .rtds-input__icon {
        @apply rtds-w-8 rtds-h-8 rtds-left-4;
    }

    /* HAS ICON SIZE STYLE */
    .has-icon.rtds-input [type='text'],
    .has-icon.rtds-input input:where(:not([type])),
    .has-icon.rtds-input [type='email'],
    .has-icon.rtds-input [type='url'],
    .has-icon.rtds-input [type='password'],
    .has-icon.rtds-input [type='number'],
    .has-icon.rtds-input [type='date'],
    .has-icon.rtds-input [type='datetime-local'],
    .has-icon.rtds-input [type='month'],
    .has-icon.rtds-input [type='search'],
    .has-icon.rtds-input [type='tel'],
    .has-icon.rtds-input [type='time'],
    .has-icon.rtds-input [type='week'],
    .has-icon.rtds-input [multiple],
    .has-icon.rtds-input textarea {
        @apply rtds-pl-12;
    }

    /* VALIDATION STYLES */
    .is-invalid .rtds-input input,
    .rtds-input input[aria-invalid="true"],
    .has-error.rtds-input input {
        @apply rtds-border-2 rtds-border-error-dark;
    }

    /* SIZE STYLES */
    .rtds-input--sm [type='text'],
    .rtds-input--sm input:where(:not([type])),
    .rtds-input--sm [type='email'],
    .rtds-input--sm [type='url'],
    .rtds-input--sm [type='password'],
    .rtds-input--sm [type='number'],
    .rtds-input--sm [type='date'],
    .rtds-input--sm [type='datetime-local'],
    .rtds-input--sm [type='month'],
    .rtds-input--sm [type='search'],
    .rtds-input--sm [type='tel'],
    .rtds-input--sm [type='time'],
    .rtds-input--sm [type='week'],
    .rtds-input--sm [multiple] {
        @apply rtds-h-8;
    }

    .rtds-input--sm [type='text'],
    .rtds-input--sm input:where(:not([type])),
    .rtds-input--sm [type='email'],
    .rtds-input--sm [type='url'],
    .rtds-input--sm [type='password'],
    .rtds-input--sm [type='number'],
    .rtds-input--sm [type='date'],
    .rtds-input--sm [type='datetime-local'],
    .rtds-input--sm [type='month'],
    .rtds-input--sm [type='search'],
    .rtds-input--sm [type='tel'],
    .rtds-input--sm [type='time'],
    .rtds-input--sm [type='week'],
    .rtds-input--sm [multiple],
    .rtds-input--sm textarea {
        @apply rtds-py-1 rtds-px-2;
    }

    .has-icon.rtds-input--sm [type='text'],
    .has-icon.rtds-input--sm input:where(:not([type])),
    .has-icon.rtds-input--sm [type='email'],
    .has-icon.rtds-input--sm [type='url'],
    .has-icon.rtds-input--sm [type='password'],
    .has-icon.rtds-input--sm [type='number'],
    .has-icon.rtds-input--sm [type='date'],
    .has-icon.rtds-input--sm [type='datetime-local'],
    .has-icon.rtds-input--sm [type='month'],
    .has-icon.rtds-input--sm [type='search'],
    .has-icon.rtds-input--sm [type='tel'],
    .has-icon.rtds-input--sm [type='time'],
    .has-icon.rtds-input--sm [type='week'],
    .has-icon.rtds-input--sm [multiple],
    .has-icon.rtds-input--sm textarea {
        @apply rtds-pl-10;
    }

    .rtds-input--lg [type='text'],
    .rtds-input--lg input:where(:not([type])),
    .rtds-input--lg [type='email'],
    .rtds-input--lg [type='url'],
    .rtds-input--lg [type='password'],
    .rtds-input--lg [type='number'],
    .rtds-input--lg [type='date'],
    .rtds-input--lg [type='datetime-local'],
    .rtds-input--lg [type='month'],
    .rtds-input--lg [type='search'],
    .rtds-input--lg [type='tel'],
    .rtds-input--lg [type='time'],
    .rtds-input--lg [type='week'],
    .rtds-input--lg [multiple] {
        @apply rtds-h-14;
    }

    .rtds-input--lg [type='text'],
    .rtds-input--lg input:where(:not([type])),
    .rtds-input--lg [type='email'],
    .rtds-input--lg [type='url'],
    .rtds-input--lg [type='password'],
    .rtds-input--lg [type='number'],
    .rtds-input--lg [type='date'],
    .rtds-input--lg [type='datetime-local'],
    .rtds-input--lg [type='month'],
    .rtds-input--lg [type='search'],
    .rtds-input--lg [type='tel'],
    .rtds-input--lg [type='time'],
    .rtds-input--lg [type='week'],
    .rtds-input--lg [multiple],
    .rtds-input--lg textarea {
        @apply rtds-py-3 rtds-px-3;
    }

    .has-icon.rtds-input--lg [type='text'],
    .has-icon.rtds-input--lg input:where(:not([type])),
    .has-icon.rtds-input--lg [type='email'],
    .has-icon.rtds-input--lg [type='url'],
    .has-icon.rtds-input--lg [type='password'],
    .has-icon.rtds-input--lg [type='number'],
    .has-icon.rtds-input--lg [type='date'],
    .has-icon.rtds-input--lg [type='datetime-local'],
    .has-icon.rtds-input--lg [type='month'],
    .has-icon.rtds-input--lg [type='search'],
    .has-icon.rtds-input--lg [type='tel'],
    .has-icon.rtds-input--lg [type='time'],
    .has-icon.rtds-input--lg [type='week'],
    .has-icon.rtds-input--lg [multiple],
    .has-icon.rtds-input--lg textarea {
        @apply rtds-pl-14;
    }
}

URL: /components/raw/input/input.css
Filesystem Path: components/02-atoms/_input/input.css
Size: 6.8 KB

Handle: @input--search
Preview:
- With layout
- Component only
Filesystem Path: components/02-atoms/_input/input.njk
References (1): @icon

Input component configurations.

iconPlaceholder: value - id for left icon
id: value - id of input
shortLabel: value - a shorter label printend in data-label attribute - needed for js error management
padding: value - input padding
border: value - input border
radius: value - input border radius
classes: value - input classes
type: value - input type
placeholder: value - if a placeholder is needed
fieldRequired: true - if input is required (print aria-required=”true” instead of required attribute, better for accessibility; print error message wrapper and id for aria-describedby)
autocomplete: value - for accessibility compliance, helps with autofilling datas, possibile values available here https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
ariaDescribedBy: value - if there’s a description for the field (used in input-field)
hasErrorControl: true - if input needs a validation (eg: email format - used in input-field)
ariaInvalid: true - if input with error is needed
alertIcon: value - id for right positioned alert icon