Select

Examples

Select

<div class="ys-select">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper">
            <select class="ys-select__control" >
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
</div>

Select on dark background

<div class="ys-select ys-select--light">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper ys-select__wrapper--light">
            <select class="ys-select__control" >
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
</div>

Select with guidance text

Guidance message for select

<div class="ys-select">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper">
            <select class="ys-select__control"  aria-labelledby="select-guidance-text">
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
    <p class="ys-select__guidance" id="select-guidance-text">Guidance message for select</p>
</div>

Disabled select

<div class="ys-select">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper ys-select__wrapper--disabled">
            <select class="ys-select__control"  disabled>
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
</div>

Select, alternative

<div class="ys-select">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper ys-select__wrapper--alternative">
            <select class="ys-select__control" >
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
</div>

Select, alternative on dark background

<div class="ys-select ys-select--light">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper ys-select__wrapper--alternative ys-select__wrapper--light">
            <select class="ys-select__control" >
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
</div>

Disabled select, alternative

<div class="ys-select">
    <label class="ys-input-field__label">
        <span class="ys-select__label-text">Label for select</span>
        <span class="ys-select__wrapper ys-select__wrapper--disabled ys-select__wrapper--alternative">
            <select class="ys-select__control"  disabled>
                <option class="ys-select__option" value="1">Option 1</option>
                <option class="ys-select__option" value="2">Option 2 which is very long which you will see</option>
                <option class="ys-select__option" value="3">Option 3</option>
                <option class="ys-select__option" value="4">Option 4</option>
                <option class="ys-select__option" value="5">Option 5</option>
                <option class="ys-select__option" value="6">Option 6</option>
                <option class="ys-select__option" value="7">Option 7</option>
            </select>
        </span>
    </label>
</div>

HTML Guidelines

UX and Design Guidelines

The alternative version should only be used when it’s the only form element in a component.

Color explanation

  • Component
  • Design guidelines
  • Code guidelines
  • Page