Styleguide

Select - Voir le template

Ville

<div class="form-element form-select"

     x-data="selectInput()"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" @click="toggle()" class="form-input select" x-text="currentLabel"></div>

    <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Select blue - Voir le template

Ville

<div class="form-element form-element--blue form-select"

     x-data="selectInput('toulouse', 'Toulouse')"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select_blue"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" @click="toggle()" class="form-input select" x-text="currentLabel"></div>

    <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_blue">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Select pill - Voir le template

Ville

<div class="form-element form-select form-select__no-width min-w-[150px]"

     x-data="selectInput"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input" name="city" class="" id="city" type="text" pattern="\S+" x-model="currentValue">

    <div x-ref="display" @click="toggle()" class="form-input select rounded-full bg-white" x-text="currentLabel"></div>

    <label @click="toggle()" :class="{ 'moved' : full }" for="city">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" @click="setValue('toulouse', 'Toulouse')">Toulouse</button></li>

        <li><button type="button" @click="setValue('narbonne', 'Narbonne')">Narbonne</button></li>

        <li><button type="button" @click="setValue('bordeaux', 'Bordeaux')">Bordeaux</button></li>

    </ul>

</div>

Select already fill - Voir le template

Ville

<div class="form-element form-select"

     x-data="selectInput('toulouse', 'Toulouse')"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select_fill"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" @click="toggle()" class="form-input select" x-text="currentLabel"></div>

    <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_fill">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Select already fill without label - Voir le template

<div class="form-element without-label form-select"

     x-data="selectInput('toulouse', 'Toulouse')"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select_fill_without_label"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" @click="toggle()" class="form-input select" x-text="currentLabel"></div>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Select with error - Voir le template

Ville

<div class="form-element error form-select"

     x-data="selectInput()"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select_error"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" @click="toggle()" class="form-input select" x-text="currentLabel"></div>

    <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_error">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Select disabled - Voir le template

Ville

<div class="form-element disabled form-select"

     x-data="selectInput()"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select_disable"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" disabled class="form-input select disabled" x-text="currentLabel"></div>

    <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_disable">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Select disabled blue - Voir le template

Ville

<div class="form-element form-element--blue disabled form-select"id_select

id_select

     x-data="selectInput()"

     :class="{ 'active' : active }"

     @click.away="active = false"

>

    <input x-ref="input"

           name="status"

           class="" id="id_select_disabled_blue"

           type="text" pattern="\S+"

           x-model="currentValue"

    >

    <div x-ref="display" disabled class="form-input select disabled" x-text="currentLabel"></div>

    <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_disabled_blue">Ville</label>

    <ul x-ref="options" class="select-options" x-show="active">

        <li><button type="button" value="toulouse">Toulouse</button></li>

        <li><button type="button" value="narbonne">Narbonne</button></li>

        <li><button type="button" value="bordeaux">Bordeaux</button></li>

    </ul>

</div>

Selects

Select