Resa Design System

Appearance

Inputs ​

v-0.0.0

Text ​

Default ​

Content of the input's legend

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputTextId">
            Input label
        </label>
    </div>
    <div class="input__container">
        <input class="input" id="inputTextId" type="text" placeholder="Placeholder" name="inputText">
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Validated ​

Content of the input's legend

html
<fieldset class="fieldset valid">
    <div class="label__container">
        <label class="label" for="inputTextValidId">
            Input label
        </label>
    </div>
    <div class="input__container">
        <input class="input" id="inputTextValidId" type="text" placeholder="Placeholder" name="inputText">
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Error ​

Content of the input's legend

Script ​

js
/*
* $input is a DOMelement that can be selected with the following selector:
* '.input__container--number'
*/
const $inputEl = $input.querySelector('.input')

// Creates the controls buttons elements
const $incrementButton = document.createElement('button')
const $decrementButton = document.createElement('button')

// Configure the controls buttons elements
$incrementButton.classList.add('input__increment')
$incrementButton.setAttribute('type', 'button')
$decrementButton.classList.add('input__decrement')
$decrementButton.setAttribute('type', 'button')

// Add buttons to the DOM
$input.insertAdjacentElement('beforeend', $incrementButton)
$input.insertAdjacentElement('beforeend', $decrementButton)

// Increment input value
function increment(e) {
    e.preventDefault()
    if ($inputEl.disabled) return
    if ($inputEl.max && Number($inputEl.value) >= $inputEl.max) return

    $inputEl.value = Number($inputEl.value) + 1
}

// Decrement input value
function decrement(e) {
    e.preventDefault()
    if ($inputEl.disabled) return
    if ($inputEl.max && Number($inputEl.value) <= $inputEl.min) return
    $inputEl.value = Number($inputEl.value) - 1
}

//Listen for click on the buttons
$incrementButton.addEventListener('click', (e) => increment(e))
$decrementButton.addEventListener('click', (e) => decrement(e))
html
<fieldset class="fieldset notValid">
    <div class="label__container">
        <label class="label" for="inputTextErrorId">
            Input label
        </label>
    </div>
    <div class="input__container">
        <input class="input" id="inputTextErrorId" type="text" placeholder="Placeholder" name="inputText">
    </div>
    <p class="feedback--error">Error message</p>
    <p class="legend">Content of the input's legend</p>
</fieldset>

With tooltip ​

Content of the input's legend

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputTextTooltipId">
            Input label
        </label>
        <button class="tooltip--noLabel" title="tooltip title">
            <span class="srOnly">tooltip content</span>
        </button>
    </div>
    <div class="input__container">
        <input disabled class="input" id="inputTextTooltipId" type="text" placeholder="Placeholder" name="inputText">
    </div>
    <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">
        <input disabled class="input" id="inputTextDisabledId" type="text" placeholder="Placeholder" name="inputText">
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Number ​

Default ​

Content of the input's legend

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputNumberId">
            Input label
        </label>
    </div>
    <div class="input__container--number">
        <input class="input" id="inputNumberId" type="number" placeholder="Placeholder" name="inputText">
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Validated ​

Content of the input's legend

html
<fieldset class="fieldset valid">
    <div class="label__container">
        <label class="label" for="inputNumberId-1">
            Input label
        </label>
    </div>
    <div class="input__container--number">
        <input class="input" id="inputNumberId-1" type="text" placeholder="Placeholder" name="inputText">
    </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="inputNumberId-2">
            Input label
        </label>
    </div>
    <div class="input__container--number">
        <input class="input" id="inputNumberId-2" type="text" placeholder="Placeholder" name="inputText">
    </div>
    <p class="feedback--error">Error message</p>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Min - Max ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputNumberId-2">
            Input label
        </label>
    </div>
    <div class="input__container--number">
        <input class="input" min="1" max="5" id="inputNumberId-4" type="text" placeholder="Placeholder" name="inputText">
    </div>
</fieldset>

Disabled ​

Content of the input's legend

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputNumberId">
            Input label
        </label>
    </div>
    <div class="input__container--number">
        <input class="input" disabled id="inputNumberId" type="number" placeholder="Placeholder" name="inputText">
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

EAN ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputEanId">
            Input label EAN
        </label>
    </div>
    <div class="input__container--ean">
        <input class="input" id="inputEanId" type="text" placeholder="5414" name="inputEan" maxlength="18">
        <button class="d--none btn--cleanInput" type="button">Clean input label</button>
    </div>
</fieldset>

Electricity index ​

kwh
html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputIndexElecId">
            Index électricité
        </label>
    </div>
    <div class="input__container--indexElec">
        <input class="input" id="inputIndexElecId" type="text" placeholder="123456,7" name="inputIndexElec" maxlength="7">
        <button class="d--none btn--cleanInput" type="button">
            <span class="srOnly">Clean input label</span>
        </button>
        <span class="indexElec-unit">m³</span>
    </div>
</fieldset>

Gas index ​

m³
html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputIndexGazId">
            Index gaz
        </label>
    </div>
    <div class="input__container--indexGaz">
        <input class="input" id="inputIndexGazId" type="text" placeholder="12345,678" name="inputIndexGaz" maxlength="8">
        <button class="d--none btn--cleanInput" type="button">
            <span class="srOnly">Clean input label</span>
        </button>
        <span class="indexGaz-unit">m³</span>
    </div>
</fieldset>

Phone ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputPhoneId">
            Téléphone
        </label>
    </div>
    <div class="input__wrapper--phone">
        <div class="input__container--select">
            <select class="input" id="selectPhonePrefixId" name="selectDefault">
                <option value="+32" data-iconclass="icon--2 me--1 icon--flagBe">+32</option>
                <option value="+352" data-iconclass="icon--2 me--1 icon--flagLu">+352</option>
                <option value="+33" data-iconclass="icon--2 me--1 icon--flagFr">+33</option>
            </select>
        </div>
        <div class="input__container">
            <input class="input" id="inputPhoneId" type="number" placeholder="412 34 56 78" name="inputEan">
        </div>
    </div>
</fieldset>

Date picker ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputDatePickerId">
            Input date picker
        </label>
    </div>
    <div class="input__container--datepicker">
        <input class="input" id="inputDatePickerId" type="date" name="inputDatePicker">
    </div>
</fieldset>

Date picker (options) ​

Format can be whatever you want following the synthax here and the pick is month or year.

html
<fieldset class="fieldset">
    <fieldset class="fieldset">
        <div class="label__container">
            <label class="label" for="inputDatePickerId">
                Input date picker
            </label>
        </div>
        <div class="input__container--datepicker">
            <input class="input" id="inputDatePickerId" type="date" name="inputDatePicker" data-pick="month"  data-format="mm/yyyy">
        </div>
    </fieldset>
</fieldset>

Week picker ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputDatePickerId">
            Input date picker
        </label>
    </div>
    <div class="input__container--weekpicker">
        <input class="input" id="inputDatePickerId" type="date" min="03/02/2025" max="03/28/2025" name="inputDatePickerFrom">
        <input class="input" id="inputDatePickerId" type="date" min="03/02/2025" max="03/28/2025" name="inputDatePickerTo">
    </div>
</fieldset>

With icon and clear button ​

Content of the input's legend

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="inputWithIconId">
            Input label
        </label>
    </div>
    <div class="input__container--withIcon input__container--iconSearch">
        <input class="input" id="inputWithIconId" type="text" placeholder="Placeholder" name="inputWithIcon">
        <button class="d--none btn--cleanInput" type="button">
            <span class="srOnly">Clean input label</span>
        </button>
    </div>
    <p class="legend">Content of the input's legend</p>
</fieldset>

Script needed ​

The clear button (X) is hidden by default and appears when the input has a value. The design system includes a built-in module btnClearInput-init.js that handles this functionality automatically.

If you need to implement it manually, here's a simple example:

js
const $input = document.querySelector('#inputWithIconId')
const $clearButton = $input.closest('.input__container--withIcon').querySelector('.btn--cleanInput')

// Show/hide clear button based on input value
function toggleClearButton() {
    if ($input.value.length > 0 && !$input.matches(':placeholder-shown')) {
        $clearButton.classList.remove('d--none')
    } else {
        $clearButton.classList.add('d--none')
    }
}

// Listen for input changes
$input.addEventListener('input', toggleClearButton)

// Clear input on button click
$clearButton.addEventListener('click', () => {
    $input.value = ''
    $input.focus()
    toggleClearButton()
})

// Initial state
toggleClearButton()

Autocomplete ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="autocompleteId">Label of autocomplete</label>
    </div>
    <div class="input__container--autocomplete">
        <input class="input" id="autocompleteId" list="dataListAutocompleteId" type="text" name="inputDatePicker" autocomplete="off">
        <datalist id="dataListAutocompleteId">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </datalist>
    </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 native display be removing the list="datalistId" attribute from the input and the datalist itself.
  • Then it creates a button list instead to be accessible.
  • After that it makes it filter the list of option as you type in the input.
  • Finaly it enable to click on each options to autocomplete the input value.

Outcome ​

html
<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="autocompleteId">
            Label of autocomplete
        </label>
    </div>
    <div class="input__container--autocomplete">
        <input class="input" id="autocompleteId" type="text" name="inputDatePicker" autocomplete="off">
        <datalist class="datalist__collapsable" id="dataListAutocompleteId">
            <div class="datalist__collapsable__wrapper">
                <option class="datalist__option">Option 1</option>
                <option class="datalist__option">Option 2</option>
                <option class="datalist__option">Option 3</option>
            </div>
        </datalist>
    </div>
</fieldset>