Resa Design System

Appearance

Selects ​

v-0.0.0

Default ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="selectDefaultId">
            Input label
        </label>
    </div>
    <div class="input__container--select">
        <select class="input" id="selectDefaultId" name="selectDefault">
            <option value="">Select an option</option>
            <option value="OptionOne">Option 1</option>
            <option value="OptionTwo">Option 2</option>
            <option value="OptionThree">Option 3</option>
        </select>
    </div>
</fieldset>

Script needed ​

The component works perfectly with no script but to make it pretty here is what the script does :

  • First it desable & hide the select input.
  • Then it creates the custon code that will replace the select visualy & functionnaly with buttons.
  • After that it binds the button.select__btn created to show the options by toggling the class open on the input__container--select.
  • Finaly it binds the button.select__option created to add the class selected to itself, update the button.select__btn value and update the select value.

Outcome ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="selectDefaultId">
            Input label
        </label>
    </div>
    <div class="input__container--select">
        <select disabled class="input d--none" id="selectDefaultId" name="selectDefault">
            <option value="">Select an option</option>
            <option value="OptionOne">Option 1</option>
            <option value="OptionTwo">Option 2</option>
            <option value="OptionThree">Option 3</option>
        </select>
        <div class="select">
            <button class="select__btn input" type="button">Select an option</button>
            <div class="select__collapsable">
                <div class="select__collapsable__wrapper">
                    <button class="select__option selected" type="button">Select an option</button>
                    <button class="select__option" type="button">Option 1</button>
                    <button class="select__option" type="button">Option 2</button>
                    <button class="select__option" type="button">Option 3</button>
                </div>
            </div>
        </div>
    </div>
</fieldset>

Validated ​

Content of the input's legend

html
<fieldset class="fieldset valid">
    <div class="label__container">
        <label class="label" for="selectValidatedId">
            Input label
        </label>
    </div>
    <div class="input__container--select">
        <select class="input" id="selectValidatedId" name="selectValidated">
            <option value="">Select an option</option>
            <option value="OptionOne">Option 1</option>
            <option value="OptionTwo">Option 2</option>
            <option value="OptionThree">Option 3</option>
        </select>
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Error ​

Content of the input's legend

html
<fieldset class="fieldset notValid">
    <div class="label__container">
        <label class="label" for="selectNotValidId">
            Input label
        </label>
    </div>
    <div class="input__container--select">
        <select class="input" id="selectNotValidId" name="selectNotValid">
            <option value="">Select an option</option>
            <option value="OptionOne">Option 1</option>
            <option value="OptionTwo">Option 2</option>
            <option value="OptionThree">Option 3</option>
        </select>
    </div>
    <p class="feedback--error">Content of the input's legend</p>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Disabled ​

Content of the input's legend

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputTextDisabledId">
            Input label
        </label>
    </div>
    <div class="input__container--select">
        <select disabled class="input" id="selectNotValidId" name="selectNotValid">
            <option value="">Select an option</option>
            <option value="OptionOne">Option 1</option>
            <option value="OptionTwo">Option 2</option>
            <option value="OptionThree">Option 3</option>
        </select>
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>