Fields

Basic examples

  • Default
  • Disabled
  • Filled
  • Error
Show code
<div class="field"> <label for="input1">Nom de votre crèche</label> <input type="text" placeholder="Enfants Heureux" id="input1"> </div>
<div class="field"> <label for="input2">Nom de votre crèche</label> <input type="text" value="Enfants Heureux" disabled id="input2"> </div>
<div class="field -filled"> <label for="input3">Nom de votre crèche</label> <input type="text" value="Enfants Heureux" id="input3"> </div>
<div class="field -error"> <label for="input4">Nom de votre crèche</label> <input type="text" value="Enfants Heureux" id="input4"> </div>

Icon

  • Default
  • Disabled
  • Filled
  • Error
Show code
<div class="field"> <label for="input5">Nom de votre crèche</label> <span class="field__icon"> <input type="text" placeholder="Enfants Heureux" > <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>
<div class="field"> <label>Nom de votre crèche</label> <span class="field__icon"> <input type="text" value="Enfants Heureux" disabled> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>
<div class="field -filled"> <label>Nom de votre crèche</label> <span class="field__icon"> <input type="text" value="Enfants Heureux"> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>
<div class="field -error"> <label>Nom de votre crèche</label> <span class="field__icon"> <input type="text" value="Enfants Heureux"> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>

Password

  • Default
  • Filled
Show code
<div class="field -password"> <label for="input725">Password</label> <span class="field__icon"> <input type="password" placeholder="Password" id="input725" value=""> <span class="icon-eye-hidden "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> </span> </div>
<div class="field -password -filled "> <label for="input726">Password</label> <span class="field__icon"> <input type="password" placeholder="Password" id="input726" value="zefzefzg"> <span class="icon-eye-hidden "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> </span> </div>

URL

  • Default
  • Filled
Show code
<div class="field"> <label for="input7444">Url</label> <input type="url" placeholder="Site web" id="input7444" value=""> </div>
<div class="field -filled"> <label for="input7587">Url</label> <input type="url" placeholder="Url" id="input7587" value="https://kidola.lu"> </div>

Textarea

  • Default
  • Disabled
  • Filled
  • Error
  • With count
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

IN APP USE: <x-forms.textarea />

250

Show code
<div class="field"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div>
<div class="field"> <label for="input10">Commentaire</label> <textarea id="input10" row="10" disabled></textarea> </div>
<div class="field -filled"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div>
<div class="field -error"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div>

Search field

  • Default
Show code
<div class="search-field" id="searchField"> <label class="search-field__label" for="input50">Liste d'enfants</label> <div class="search-field__input" id="triggerExpand"> <span class="icon-search-blue "><span class="path1"></span><span class="path2"></span></span> <input type="text" placeholder="Nom ou prénom" id="input50"> <button type="button" class="close" id="emptyField"><span class="icon-close "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div>

File field

The real input file is hidden (opacity 0). What you can see on the screen is just a div which looks like a field. By clicking on It, It triggers the input file.

  • Default
  • Disabled
  • Filled
  • Error
Ajouter un fichier
Ajouter un fichier
Ajouter un fichier
filename.jpg
filename.jpg
filename.jpg
Ajouter un fichier
Show code
<div class="field -file"> <label for="inputFile">Ajoutr une pièce jointe</label> <input type="file" placeholder="Enfants Heureux" id="inputFile"> <div class="field"> Ajouter un fichier <span class="field__icon"> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div> </div>
<div class="field -file"> <label for="inputFile">Ajoutr une pièce jointe</label> <input type="file" placeholder="Enfants Heureux" id="inputFile" disabled> <div class="field"> Ajouter un fichier <span class="field__icon"> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div> </div>
<div class="field -file -filled"> <label for="inputFile">Ajoutr une pièce jointe</label> <input type="file" placeholder="Enfants Heureux" id="inputFile"> <div class="field"> Ajouter un fichier <span class="field__icon"> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div> </div>
<div class="field -file -error"> <label for="inputFile">Ajoutr une pièce jointe</label> <input type="file" placeholder="Enfants Heureux" id="inputFile"> <div class="field"> Ajouter un fichier <span class="field__icon"> <span class="icon-attached-file"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div> </div>

Date field

  • Default
  • Disabled
  • Filled
  • Error
Show code
<div class="field"> <label for="input450">Date</label> <span class="field__icon"> <input type="date" placeholder="Date" id="input450" value=""> <span class="icon-date-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>
<div class="field"> <label for="input454">Date</label> <span class="field__icon"> <input type="date" placeholder="Date" id="input454" disabled> <span class="icon-date-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>
<div class="field -filled"> <label for="input455">Date</label> <span class="field__icon"> <input type="date" placeholder="Date" id="input455"> <span class="icon-date-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>
<div class="field -error"> <label for="input456">Date</label> <span class="field__icon"> <input type="date" placeholder="Date" id="input456"> <span class="icon-date-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> </span> </div>

Time field

  • Default
  • Disabled
  • Filled
  • Error
Show code
<div class="field"> <label for="input500">Time</label> <input type="time" placeholder="Time" id="input500" value=""> </div>
<div class="field"> <label for="input501">Time</label> <input type="time" placeholder="Time" id="input501" disabled> </div>
<div class="field -filled"> <label for="input502">Time</label> <input type="time" placeholder="Time" id="input502"> </div>
<div class="field -error"> <label for="input503">Time</label> <input type="time" placeholder="Time" id="input503"> </div>

Number field

  • Default
  • Disabled
  • Filled
  • Error
Show code
<div class="field"> <label for="input600">Number</label> <input type="number" placeholder="Number" id="input600" value=""> </div>
<div class="field"> <label for="input601">Number</label> <input type="number" value="45" id="input601" disabled> </div>
<div class="field -filled"> <label for="602">Number</label> <input type="number" value="78" id="602"> </div>
<div class="field -error"> <label for="603">Number</label> <input type="number" value="74" id="603"> </div>

Select

  • Default
  • Disabled
  • Filled
  • Error
  • Blue background
Show code
<div class="field -select"> <label for="select1">Raison de l'absence</label> <select id="select1"> <option value="" disabled selected>Sélectionnez une raison</option> <option value="Rendez-vous">Rendez-vous</option> <option value="Malade">Malade</option> <option value="Autre">Autre</option> </select> </div>
<div class="field -select"> <label for="select2">Raison de l'absence</label> <select id="select2" disabled> <option disabled selected>Sélectionnez une raison</option> <option value="Rendez-vous">Rendez-vous</option> <option value="Malade">Malade</option> <option value="Autre">Autre</option> </select> </div>
<div class="field -select -filled"> <label for="select3">Raison de l'absence</label> <select id="select3"> <option value="" disabled="" selected="">Sélectionnez une raison</option> <option value="Rendez-vous" selected="">Rendez-vous</option> <option value="Malade">Malade</option> <option value="Autre">Autre</option> </select> </div>
<div class="field -select -error"> <label for="select4">Raison de l'absence</label> <select id="select4"> <option value="" disabled="" selected="">Sélectionnez une raison</option> <option value="Rendez-vous">Rendez-vous</option> <option value="Malade">Malade</option> <option value="Autre">Autre</option> </select> </div>
Select will change color depanding on the parent class

Checkbox

  • Default
  • Disabled
  • Filled
  • Error
Show code
<div class="checkboxContainer"> <input type="checkbox" id="checkbox1"> <div class="checkbox"> <span class="icon-check-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span> </span></div> <label for="checkbox1">Les dinosaures forment un super ordre ainsi qu'un clade extrêmement diversifié.</label> </div>
<div class="checkboxContainer "> <input type="checkbox" id="checkbox2" disabled=""> <div class="checkbox"> <span class="icon-check-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span> </span></div> <label for="checkbox2">Les dinosaures forment un super ordre ainsi qu'un clade extrêmement diversifié.</label> </div>
<div class="checkboxContainer -filled"> <input type="checkbox" id="checkbox3" checked=""> <div class="checkbox"> <span class="icon-check-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span> </span></div> <label for="checkbox3">Les dinosaures forment un super ordre ainsi qu'un clade extrêmement diversifié.</label> </div>
<div class="checkboxContainer -error"> <input type="checkbox" id="checkbox2"> <div class="checkbox"> <span class="icon-check-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span> </span></div> <label for="checkbox2">Les dinosaures forment un super ordre ainsi qu'un clade extrêmement diversifié.</label> </div>

Multiselect

  • Default
Rocky Chase Zuma Hello coin fewfewfewfw efew Hello ewfewfw fewfewfw fwe
Fiche
Rocky
Chase
Zuma
Stella
Marcus

Fieldset

  • Default
Informations