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>