Davidson Styleguide

Select Menu: Error 

<label for="input405ope1kllpc7qc9" class="select--error">Select Menu</label>
<select id="input405ope1kllpc7qc9" class="select--error">
            <option>Option one</option>
            <option>Option two</option>
            <option>Option three is a very long option that will make the menu very wide</option>
            <option>Option four</option>
    </select>
 
{% if select is not empty %}
{% set input_id = 'input'|uniqid %}
<label for="{{ input_id }}" class="{{ select.variant }}">{{ select.label }}</label>
<select id="{{ input_id }}" class="{{ select.variant }}" {% if select.required %}aria-required="true"{% endif %} {% if select.disabled %}disabled="disabled"{% endif %}>
    {% for item in select.items %}
        <option>{{ item }}</option>
    {% endfor %}
</select>
{% endif %}
 
{
  "select": {
    "label": "Select Menu",
    "items": [
      "Option one",
      "Option two",
      "Option three is a very long option that will make the menu very wide",
      "Option four"
    ],
    "variant": "select--error"
  }
}
  • Content: 
    select {
    appearance: none;
    background: rgba(color(gray-lightest), 0.2);

    // custom down arrow
    // darkest-gray/color-text angle down
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOmJ4PSJodHRwczovL2JveHktc3ZnLmNvbSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAwIDEwMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMjUyNTI1O30KPC9zdHlsZT4KPHBvbHlnb24gYng6b3JpZ2luPSIwLjUgMC40OTY0NTIiIGNsYXNzPSJzdDAiIHBvaW50cz0iNDk5LjgsODAyLjEgMTAwMCwzMDIuNCA4OTUuNSwxOTcuOSA1MDAsNTkzLjMgMTA0LjYsMTk3LjkgMCwzMDIuNCAiPgo8L3BvbHlnb24+Cjwvc3ZnPgo=);
    background-origin: content-box;
    background-position: right -1.4rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: 2rem;

    &.select--error {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOmJ4PSJodHRwczovL2JveHktc3ZnLmNvbSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAwIDEwMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRUIwMzAzO30KPC9zdHlsZT4KPHBvbHlnb24gYng6b3JpZ2luPSIwLjUgMC40OTY0NTIiIGNsYXNzPSJzdDAiIHBvaW50cz0iNDk5LjgsODAyLjEgMTAwMCwzMDIuNCA4OTUuNSwxOTcuOSA1MDAsNTkzLjMgMTA0LjYsMTk3LjkgMCwzMDIuNCAiPgo8L3BvbHlnb24+Cjwvc3ZnPgo=);
    }

    &.select--valid {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOmJ4PSJodHRwczovL2JveHktc3ZnLmNvbSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAwIDEwMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNTVCMzdDO30KPC9zdHlsZT4KPHBvbHlnb24gYng6b3JpZ2luPSIwLjUgMC40OTY0NTIiIGNsYXNzPSJzdDAiIHBvaW50cz0iNDk5LjgsODAyLjEgMTAwMCwzMDIuNCA4OTUuNSwxOTcuOSA1MDAsNTkzLjMgMTA0LjYsMTk3LjkgMCwzMDIuNCAiPgo8L3BvbHlnb24+Cjwvc3ZnPgo=);
    }

    &[disabled] {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOmJ4PSJodHRwczovL2JveHktc3ZnLmNvbSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAwIDEwMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNzY3Njc2O30KPC9zdHlsZT4KPHBvbHlnb24gYng6b3JpZ2luPSIwLjUgMC40OTY0NTIiIGNsYXNzPSJzdDAiIHBvaW50cz0iNDk5LjgsODAyLjEgMTAwMCwzMDIuNCA4OTUuNSwxOTcuOSA1MDAsNTkzLjMgMTA0LjYsMTk3LjkgMCwzMDIuNCAiPgo8L3BvbHlnb24+Cjwvc3ZnPgo=);
    }
}
  • URL: /components/raw/select/select.scss
  • Filesystem Path: patterns/atoms/forms/select/select.scss
  • Size: 3.7 KB

This select menu can be used in forms to collect data. It is not intended to be used as a standalone pattern. The required, disabled, error, and valid states are provided to be applied to select menus by form applications as needed.