OffHealth component library

Input element: Search 

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

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

    <input id="" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-2 px-3 border n7-border-gray-01 rounded-lg w-full pl-10 " type="search" placeholder="cerca...">

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

No notes defined.