Regione Toscana Design System

Select element: Light 

<div class="rtds-select rtds-select--light">

    <select id="" class="">
        <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 class="rtds-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: 'rtds-absolute rtds-left-4 rtds-content-placeholder', size: 'rtds-w-6 rtds-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 %} rtds-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: 'rtds-absolute rtds-right-8 rtds-content-placeholder rtds-content-error', size: 'rtds-w-6 rtds-h-6'}, true %}
  {% endif -%}
</div>
 
{
  "wrapperClasses": "rtds-select--light"
}
  • Content: 
    /**
 * SELECT COMPONENT
 *
 *
*/
@layer components {
    .rtds-select {
        @apply rtds-flex rtds-items-center rtds-relative;
    }
    
    :where(.rtds-select) select {
        @apply rtds-w-full rtds-h-11 rtds-input-placeholder rtds-content-placeholder rtds-py-2 rtds-pl-3 rtds-pr-10 rtds-border rtds-border-input rtds-rounded-lg rtds-text-sm rtds-font-semibold;
    }
    
    /* Error */
    .rtds-select.has-error select,
    .is-invalid .rtds-select select {
        @apply rtds-border-2 rtds-border-error-dark;
    }

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

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

    /* Select light */
    :where(.rtds-select--light) select {
        @apply rtds-rounded-none rtds-border-t-0 rtds-border-r-0 rtds-border-l-0;
    }
}
  • URL: /components/raw/select/select.css
  • Filesystem Path: components/02-atoms/_select/select.css
  • Size: 965 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