OffHealth component library

Input field component 

<div class="n7-input-field grid gap-2">
    <label for="username" class="block text-base font-medium n7-content-01">Username</label>

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

        <input id="username" 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" type="text">

    </div>
</div>
<div class="n7-input-field grid gap-2">
    <label for="password" class="block text-base font-medium n7-content-01">Password</label>

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

        <input id="password" 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" type="password">

    </div>
</div>
<div class="n7-input-field flex gap-2">

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

        <input id="remember" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-2 px-3 border n7-border-gray-01 rounded-lg" type="checkbox">

    </div>
    <label for="remember" class="block text-base font-medium n7-content-01">Ricordami</label>
</div>
 
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
    <label for="username" class="block text-base font-medium n7-content-01">Username</label>
    {% render '@input', { id: 'username', classes: 'w-full', type: 'text' }, true %}
</div>
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
    <label for="password" class="block text-base font-medium n7-content-01">Password</label>
    {% render '@input', { id: 'password', classes: 'w-full', type: 'password' }, true %}
</div>
<div class="n7-input-field flex gap-2{% if classes %} {{ classes }}{% endif %}">
    {% render '@input', { id: 'remember', type: 'checkbox' }, true %}
    <label for="remember" class="block text-base font-medium n7-content-01">Ricordami</label>
</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)