Net7 UI Kit

Select field component: Lg 

<div class="n7-input-field n7-select-field n7-select-field--lg">
    <label for="" class="n7-input-field__label">
        Text label

    </label>

    <div class="n7-select rtds-select--lg 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" data-label="selectShortLabel" aria-required="true" aria-describedBy="selectIdError selectAriaDescribedBy" aria-invalid="true">
            <option value="1">text</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>
    </div>

</div>
 
{% extends '@select-field' %}
{% block classes %}{{ super() }} n7-select-field--lg{% endblock %}
 
{
  "label": "Text label",
  "selectId": "selectId",
  "selectPlaceholder": "text",
  "hasError": false,
  "iconAlert": false,
  "select": {
    "placeholder": "text",
    "wrapperClasses": "rtds-select--lg",
    "hasError": false,
    "iconAlert": false
  }
}
  • Content: 
    /**
 * SELECT COMPONENT
 *
 *
*/
@layer components {
    .n7-select-field:where(:not(.n7-field-inline)) {
        @apply gap-1;
    }

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

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

    :where(.n7-select-field--sm) .n7-input-field__label {
        @apply n7-body-xs;
    }

    :where(.n7-select-field--lg) .n7-input-field__label {
        @apply n7-body-lg;
    }

}
  • URL: /components/raw/select-field/select-field.css
  • Filesystem Path: components/03-molecules/forms/select-field/select-field.css
  • Size: 571 Bytes

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

  • label: value - select label

  • classes: value - when you need extra classes - for style overriding etc

  • labelHidden: true - if label is visually hidden - label is still available for screen readers

  • selectId: pass id for select component

  • Padding: manage select padding override if needed

  • Border: manage select border width and color overrides if needed

  • Radius: manage select border radius overrides if needed

  • Classes: add more select classes if needed

  • Placeholder: add select placeholder if needed (value for select default state)

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

  • gap: value - if internal spacing adjustment is needed - default is gap-1

  • Required: true - if select is required (print aria-required=”true” instead of required attribute, better for accessibility)

  • AriaDescribedBy: value - if there’s a description for the field, id of the description

  • HasErrorControl: true - if select needs a validation (eg: email format)

  • Description: value - if description for field is needed - needs also an id (via selectAriaDescribedBy)

  • AriaInvalid: true - if select with error is needed

  • IconPlaceholder: icon id - if icon placeholder (before placeholder/value) if needed

  • AlertIcon: icon id - if alert icon is needed

  • HasError: true - for select with error (select style)

  • errorDescription: value - if error description is needed - needs also an id (via selectAriaDescribedError)

Blocks:

  • classes: for class overridings in variant templates, if needed