Net7 design system

Input field component 

<div class="n7-input-field grid gap-3">
    <label for="inputId" class="block text-sm font-medium n7-content-03">Text label</label>

    <div class="n7-input flex items-center relative">

        <svg class="inline-block align-middle fill-current w-6 h-6 absolute left-4 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#mini--magnifying-glass" />
        </svg>

        <input id="inputId" class="w-full border-2 n7-border-gray-01 text-sm n7-input-placeholder py-3 px-4 border n7-border-gray-01 rounded-lg pl-12 ">

    </div>
</div>
 
<div class="n7-input-field grid gap-3{% if classes %} {{ classes }}{% endif %}">
    <label for="{{ inputId }}" class="block text-sm font-medium n7-content-03">{{ label }}</label>
    {% render '@input', { id: inputId, padding: inputPadding, border: inputBorder, radius: inputRadius, classes: inputClasses, type: inputType, placeholder: inputPlaceholder }, true %}
</div>
 
{
  "label": "Text label",
  "inputId": "inputId"
}

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

  • inputId: pass id for input component
  • inputPadding: manage input padding override if needed
  • inputBorder: manage input border width and color overrides if needed
  • inputRadius: manage input border radius overrides if needed
  • inputClasses: add more input classes if needed
  • inputType: manage input type (eg: text, tel, email, search etc)
  • inputPlaceholder: add input placeholder if needed (note: avoid using placeholder if possibile)