UI Molecules

Form controls

1.1 Basic exemple

<!-- Input inside a form -->
<div class="amui-m-form-group form-group">
  <label class="amui-a-form-label" for="exampleInputName1">Name</label>
  <input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
</div>

<!-- Email inside a form -->
<div class="amui-m-form-group form-group">
  <label class="amui-a-form-label" for="exampleInputEmail1">Email</label>
  <input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>

<!-- Button inside a form -->
<div class="amui-m-form-group form-group">
  <button type="button" class="amui-a-btn is--default is--sm">Default button</button>
</div>

1.2 Help text

A block of help text that breaks onto a new line and may extend beyond one line.
A block of help text that breaks onto a new line and may extend beyond one line.
<div class="amui-m-form-group form-group">
  <label for="inputHelpBlock" class="amui-a-form-label">Input with help text</label>
  <input type="text" id="inputHelpBlock" class="amui-a-form-control form-control" aria-describedby="helpBlock">
  <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

<div class="amui-m-form-group form-group is--success">
  <label class="amui-a-form-label control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="amui-a-form-control form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

<div class="amui-m-form-group form-group is--warning">
  <label class="amui-a-form-label control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="amui-a-form-control form-control" id="inputWarning1">
</div>

<div class="amui-m-form-group form-group is--error">
  <label class="amui-a-form-label control-label" for="inputError1">Input with error</label>
  <input type="text" class="amui-a-form-control form-control" id="inputError1">
</div>

1.3 Date picker

<div class="amui-m-form-group form-group">
  <label class="amui-a-form-label" for="exampleInputDate1">Début</label>
    <span class="is--datepicker">
      <input type="text" class="amui-a-form-control form-control" id="exampleInputDate1" placeholder="DD/MM/YYYY HH:MM" value="">
    </span>
</div>

1.4 Select + Label

<div class="amui-m-form-group form-group">
  <label for="select1" class="amui-a-form-label">Filtre</label>
  <span class="is--select-wrapper">
    <select id="select1" class="amui-a-form-control form-control">
      <option>Choisissez un filtre</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </span>
</div>