Net7 UI Kit

Input field component: Search 

<div class="n7-input-field gap-1 ">
    <label for="" class="n7-input-field__label">
        Text label

    </label>

    <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" type="search">
    </div>

</div>
 
<div class="n7-input-field{% if gap %} {{ gap }}{% else %} gap-1{% endif %}{% if classes %} {{ classes }}{% endif %} {% if input.hasError %} has-error{% endif %}">
    <label for="{{ input.id }}" class="n7-input-field__label{% if hiddenLabel %} n7-sr-only{% endif %}{% if labelClasses %} {{ labelClasses }}{% endif %}">
        {{ label }}
        {% if input.fieldRequired %}
            <abbr class="n7-font-bold n7-no-underline" title="obbligatorio">*</abbr>
        {% endif %}
    </label>
    {% block input %}
      {% render '@input', input, true %}
    {% endblock %}
    {% if input.fieldRequired or input.ariaDescribedBy or input.hasErrorControl %}
        <span class="n7-input-field__hint">
            {% if input.fieldRequired or input.hasErrorControl %}
            <span class="n7-input-field__error" id="{{ input.id }}Error" aria-live="assertive">
                {{ errorDescription }}
            </span>
            {% endif %}
            {% if inputDescription %}
            <span class="n7-input-field__description" id="{{ input.ariaDescribedBy }}">
                {{ inputDescription }}
            </span>
            {% endif %}
        </span>
    {% endif %}
</div>
 
{
  "label": "Text label",
  "inputId": "inputId",
  "input": {
    "type": "search",
    "iconPlaceholder": "mini--magnifying-glass"
  }
}
  • Content: 
    /**
 * INPUT FIELD
 *
*/
@layer components {
    .n7-input-field {
        @apply grid content-start;
    }

    .n7-input-field__label {
        @apply block text-sm font-bold n7-content-03;
    }

    legend:where(.n7-input-field__label) {
        @apply mb-1;
    }

    .n7-input-field__error {
        @apply n7-body-sm font-medium n7-content-error;
    }

    .n7-input-field__description {
        @apply n7-body-sm font-medium n7-content-03;
    }

    .n7-input-field.has-error input {
        @apply border-2 n7-border-error-dark;
    }

    /* INPUT FIELD INLINE */
    .n7-field-inline {
        @apply flex items-center gap-2;
    }

    .n7-field-inline .n7-input,
    .n7-field-inline .n7-select {
        @apply flex-1;
    }
}
  • URL: /components/raw/input-field/input-field.css
  • Filesystem Path: components/03-molecules/forms/input-field/input-field.css
  • Size: 743 Bytes

Composite input field component. Include input component, customized if needed with parameteres:

  • label: value - input label
  • labelHidden: true - if label is visually hidden - label is still available for screen readers
  • inputShortLabel: value - a shorter label printend in data-label attribute - needed for js error management
  • gap: value - if internal spacing adjustment is needed - default is gap-1
  • inputId: pass id for input component
  • Padding: manage input padding override if needed
  • Border: manage input border width and color overrides if needed
  • Radius: manage input border radius overrides if needed
  • Classes: add more input classes if needed
  • Type: manage input type (eg: text, tel, email, search etc)
  • Placeholder: add input placeholder if needed (note: avoid using placeholder if possibile)
  • Required: true - if input is required (print aria-required=”true” instead of required attribute, better for accessibility)
  • 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, id of the description
  • HasErrorControl: true - if input needs a validation (eg: email format)
  • Description: value - if description for field is needed - needs also an id (via inputAriaDescribedBy)
  • AriaInvalid: true - if input with error is needed
  • IconPlaceholder: icon id - if icon placeholder (before placeholder/value) if needed
  • AlertIcon: icon id - if alert icon is needed
  • HasError: true - for input with error (input style)
  • errorDescription: value - if error description is needed - needs also an id (via inputAriaDescribedError)
  • classes: value - when you need extra classes - for style overriding etc

Blocks:

  • classes: for class overridings in variant templates, if needed