Net7 UI Kit

Select element: Light 

<div class="n7-select n7-select--light has-error has-icon">

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

    <select id="selectId" class="selectPadding selectBorder selectRadius  selectClasses pr-16" data-label="selectShortLabel" aria-required="true" aria-describedBy="selectIdError selectAriaDescribedBy" aria-invalid="true">
        <option value="1">selectPlaceholder</option>
        <option value="2">Option 1</option>
        <option value="3">Option 2</option>
        <option value="4">Option 3</option>
        <option value="5">Option 4</option>
        <option value="6">Option 5</option>

    </select>
    <svg class="n7-icon inline-block align-middle fill-current w-6 h-6 absolute right-8 n7-content-placeholder n7-content-error" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#outline--exclamation-circle" />
    </svg>

</div>
 
<div class="n7-select{% block wrapperClasses %}{% if wrapperClasses %} {{ wrapperClasses }}{% endif %}{% endblock %}{% if hasError %} has-error{% endif %}{% if iconPlaceholder %} has-icon{% endif %}">
  {% set errorId = id ~ 'Error' %}
  {% if iconPlaceholder %} {% render '@icon', {id: iconPlaceholder, classes: 'absolute left-4 n7-content-placeholder', size: 'w-6 h-6'}, true %} {% endif
  %}
  <select
    id="{{ id }}"
    class="{% if padding %}{{ padding }} {% endif %}{% if border %}{{ border }} {% endif %}{% if radius %}{{ radius }} {% endif %}{% if classes %} {{ classes }}{% endif %}{% if iconAlert %} pr-16{% endif %}"
      {% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
      {% if fieldRequired %} aria-required="true"{% endif %}
      {% if ariaDescribedBy or hasErrorControl or fieldRequired %} aria-describedBy="
        {%- if hasErrorControl or fieldRequired -%}
        {{- errorId -}}
          {%- if ariaDescribedBy %} {{ ariaDescribedBy -}}{%- endif -%}
        {% elseif ariaDescribedBy -%}
        {{- ariaDescribedBy -}}
        {% endif %}"
      {% endif %}
      {% if ariaInvalid %} aria-invalid="true"{% endif %}
        
  >
    <option value="1">{% if placeholder %}{{ placeholder }}{% else %}Text{% endif %}</option>
    <option value="2">Option 1</option>
    <option value="3">Option 2</option>
    <option value="4">Option 3</option>
    <option value="5">Option 4</option>
    <option value="6">Option 5</option>

  </select>
    {%- if iconAlert %}
    {% render '@icon', {id: 'outline--exclamation-circle', classes: 'absolute right-8 n7-content-placeholder n7-content-error', size: 'w-6 h-6'}, true %}
  {% endif -%}
</div>
 
{
  "id": "selectId",
  "shortLabel": "selectShortLabel",
  "padding": "selectPadding",
  "border": "selectBorder",
  "radius": "selectRadius",
  "classes": "selectClasses",
  "type": "selectType",
  "placeholder": "selectPlaceholder",
  "iconPlaceholder": "selectIconPlaceholder",
  "fieldRequired": "selectRequired",
  "ariaDescribedBy": "selectAriaDescribedBy",
  "hasErrorControl": "selectHasErrorControl",
  "ariaInvalid": "selectAriaInvalid",
  "iconAlert": "selectIconAlert",
  "hasError": "selectHasError",
  "wrapperClasses": "n7-select--light"
}
  • Content: 
    /**
 * SELECT COMPONENT
 *
 *
*/
@layer components {
    .n7-select {
        @apply flex items-center relative;
    }
    
    :where(.n7-select) select {
        @apply w-full h-11 n7-input-placeholder n7-content-placeholder py-2 pl-3 pr-10 border rounded-lg text-sm font-semibold;
    }
    
    /* Error */
    .n7-select.has-error select,
    .is-invalid .n7-select select {
        @apply border-2 n7-border-error-dark;
    }

    /* Sizes */
    :where(.n7-select--sm) select {
        @apply h-8 py-0.5 pl-2 pr-8 bg-[right_0.25rem_center];
    }

    :where(.n7-select--lg) select {
        @apply h-14 py-3 pl-3 pr-12 bg-[right_0.75rem_center];
    }

    /* Select light */
    :where(.n7-select--light) select {
        @apply rounded-none border-t-0 border-r-0 border-l-0;
    }
}
  • URL: /components/raw/select/select.css
  • Filesystem Path: components/02-atoms/_select/select.css
  • Size: 792 Bytes

Select component configurations. USE WITH

  • wrapperClasses: value - classes for select wrapper

  • iconPlaceholder: value - id for left icon

  • id: value - id of input

  • padding: value - input padding

  • border: value - input border

  • radius: value - input border radius

  • classes: value - input classes

  • placeholder: value - if a placeholder is needed (value for select default state)

  • shortLabel: value - a shorter label printend in data-label attribute - needed for js error management

  • fieldRequired: true - if input is required (print aria-required=”true” instead of required attribute, better for accessibility; print error message wrapper and id for aria-describedby)

  • ariaDescribedBy: value - if there’s a description for the field (used in input-field)

  • hasErrorControl: true - if input needs a validation (eg: email format - used in input-field)

  • ariaInvalid: true - if input with error is needed

  • alertIcon: value - id for right positioned alert icon