Input element

Ready

HTML
View
Context
Assets
Info
Notes


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


        <div class="n7-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: 'n7-input__icon', size: ''}, true %}
    {% endif -%}
      <input
        id="{{ id }}"
        class="{% if padding %}{{ padding }} {% endif %}{% if radius %}{{ radius }} {% endif %}{% if border %}{{ border }} {% endif %}text-sm n7-input-placeholder{% if classes %} {{ classes }}{% endif %}{% if iconAlert %} 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: 'absolute right-4 n7-content-placeholder n7-content-error', size: 'w-6 h-6'}, true %}
      {% endif -%}
  </div>


        
            
            {
  "input": {
    "id": "inputId",
    "shortLabel": "inputShortLabel",
    "padding": "inputPadding",
    "border": "inputBorder",
    "radius": "inputRadius",
    "classes": "inputClasses",
    "type": "inputType",
    "placeholder": "inputPlaceholder",
    "iconPlaceholder": "inputIconPlaceholder",
    "fieldRequired": "inputRequired",
    "autocomplete": "inputAutocomplete",
    "ariaDescribedBy": "inputAriaDescribedBy",
    "hasErrorControl": "inputHasErrorControl",
    "ariaInvalid": "inputAriaInvalid",
    "iconAlert": "inputIconAlert",
    "hasError": "inputHasError"
  }
}

File:

Content:


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

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


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

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

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

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

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


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


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

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

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

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

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


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

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

Handle: @input
Preview:
- With layout
- Component only
Filesystem Path: components/02-atoms/_input/input.njk
References (1): @icon
Referenced by (11): @input--lg, @input--sm, @input-field, @input-field--search, @input-field--has-error-markup, @input-field--is-required, @input-field--has-description, @input-field--has-error, @input-field--has-error-and-description, @input-field--lg, @input-field--sm

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