<div class="n7-input has-icon">
<svg class="n7-icon inline-block align-middle fill-current n7-input__icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
<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"
},
"iconPlaceholder": "mini--magnifying-glass"
}
/**
* 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;
}
}
Input component configurations.