Inputs Textarea Email Password Number Form date Search bar Selects Disabled state Input autocomplete

UI Atoms

Supported controls

1.1 Inputs

<input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">

1.2 Textarea

<textarea class="amui-a-form-control form-control" id="example" rows="4" placeholder="Description..."></textarea>

1.3 Email

<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">

1.4 Password

<input type="password" class="amui-a-form-control form-control" id="exampleInputPassword3" placeholder="Password">

1.5 Number

<input type="number" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="En minutes">

1.6 Form date

Lien vers jQuery UI Datepicker

<span class="is--datepicker">
  <input type="text" class="amui-a-form-control form-control" id="datepicker" placeholder="DD/MM/YYYY HH:MM" value="">
</span>

1.7 Search bar

<input type="search" class="amui-a-form-control form-control" placeholder="Recherche" aria-controls="">

1.8 Selects

<span class="is--select-wrapper">
  <select class="amui-a-form-control form-control" id="exampleSelect1">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
</span>

1.8 Selects multiple attribute

<select multiple class="amui-a-form-control form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

1.9 Disabled state

<input type="text" class="amui-a-form-control form-control" placeholder="Text input disabled" disabled>

1.10 Inputs autocomplete

<div class="amui-g-grid row">
  <div id="autocomplete" class="amui-g-grid__item col-sm-6">
    <div class="ui-widget">
      <input id="tags" type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
    </div>
  </div>
</div>


<script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      appendTo: "#autocomplete"
    });

    // Element that the autocomplete menu gets appended to...
    var appended = $('ul.ui-autocomplete').parent().get(0);

  });
</script>
← Form checkboxes and radios Form Label →