Net7 design system

Input element 

<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="" 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 class="n7-input flex items-center relative">
    {% if iconPlaceholder %}
      {% render '@icon',{id: iconPlaceholder, classes: 'absolute left-4 n7-content-placeholder', size: 'w-6 h-6'}, true %}
    {% endif %}
      <input
        id="{{ id }}" class="w-full border-2 n7-border-gray-01 text-sm n7-input-placeholder {{ padding }} {{ border }} {{ radius }}{% if classes %} {{ classes }}{% endif %}{% if iconPlaceholder %} pl-12 {% endif %}"{% if type %} type="{{ type }}"{% endif %}
        {% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
      {% if alertIcon %}
        {% render '@icon',{id: alertIcon}, true %}
      {% endif %}
  </div>
 
{
  "padding": "py-3 px-4",
  "border": "border n7-border-gray-01",
  "radius": "rounded-lg",
  "iconPlaceholder": "mini--magnifying-glass"
}

No notes defined.