Source Code HTML / SASS
Vous trouverez ici les démos et le code source statiques du composant.
On expose les différentes déclinaisons du composant au format HTML et SASS.
Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.
Classic Form
Copied
<form class="af-form" name="myform">
<h1 class="af-title--content">Form Element</h1>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label">Classic checkbox</label>
</div>
<div class="col-md-10">
<div class="af-form__checkbox">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox1" />
<label class="af-form__label" for="checkbox1"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">lorem ipsum dolor sit amet</span></label>
</div>
<div class="af-form__checkbox">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox2" />
<label class="af-form__label" for="checkbox2"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Nam sem nisi, auctor sit amet massa sit amet</span></label>
</div>
<div class="af-form__checkbox">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox3" />
<label class="af-form__label" for="checkbox3"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Ut sollicitudin eleifend tincidunt</span></label>
</div>
<div class="af-form__checkbox af-form__checkbox--disabled">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox4" disabled="disabled" />
<label class="af-form__label" for="checkbox4"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">disabled</span></label>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label">Inline checkbox</label>
</div>
<div class="col-md-10">
<div class="af-form__checkbox-inline">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox25" />
<label class="af-form__label" for="checkbox25"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Check 1</span></label>
</div>
<div class="af-form__checkbox-inline">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox26" />
<label class="af-form__label" for="checkbox26"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Check 2</span></label>
</div>
<div class="af-form__checkbox-inline">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox27" />
<label class="af-form__label" for="checkbox27"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Check 3</span></label>
</div>
<div class="af-form__checkbox-inline af-form__checkbox-inline--disabled">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox28" disabled="disabled" />
<label class="af-form__label" for="checkbox28"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Disabled</span></label>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label">Classic checkbox</label>
</div>
<div class="col-md-10">
<div class="af-form__checkbox-custom">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox13" />
<label class="af-form__label" for="checkbox13"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Check 1</span></label>
</div>
<div class="af-form__checkbox-custom">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox14" />
<label class="af-form__label" for="checkbox14"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Check 2</span></label>
</div>
<div class="af-form__checkbox-custom">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox15" />
<label class="af-form__label" for="checkbox15"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Check 3</span></label>
</div>
<div class="af-form__checkbox-custom af-form__checkbox-custom--disabled">
<input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox16" disabled="disabled" />
<label class="af-form__label" for="checkbox16"><span class="af-form__indicator">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span><span class="af-form__description">Disabled</span></label>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label">Classic radio</label>
</div>
<div class="col-md-10">
<div class="af-form__radio">
<input class="af-form__input-radio" name="classic" type="radio" id="radio1" />
<label class="af-form__label" for="radio1"><span class="af-form__description"> lorem ipsum dolor sit amet</span></label>
</div>
<div class="af-form__radio">
<input class="af-form__input-radio" name="classic" type="radio" id="radio2" />
<label class="af-form__label" for="radio2"><span class="af-form__description"> Nam sem nisi, auctor sit amet massa sit amet</span></label>
</div>
<div class="af-form__radio">
<input class="af-form__input-radio" name="classic" type="radio" id="radio3" />
<label class="af-form__label" for="radio3"><span class="af-form__description"> Ut sollicitudin eleifend tincidunt</span></label>
</div>
<div class="af-form__radio af-form__radio--disabled">
<input class="af-form__input-radio" name="classic" type="radio" id="radio4" disabled="disabled" />
<label class="af-form__label" for="radio4"><span class="af-form__description"> disabled</span></label>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label">Inline radio</label>
</div>
<div class="col-md-10">
<div class="af-form__radio-inline">
<input class="af-form__input-radio" name="classic-inline" type="radio" id="radio25" />
<label class="af-form__label" for="radio25"><span class="af-form__description"> Radio 1</span></label>
</div>
<div class="af-form__radio-inline">
<input class="af-form__input-radio" name="classic-inline" type="radio" id="radio26" />
<label class="af-form__label" for="radio26"><span class="af-form__description"> Radio 2</span></label>
</div>
<div class="af-form__radio-inline">
<input class="af-form__input-radio" name="classic-inline" type="radio" id="radio27" />
<label class="af-form__label" for="radio27"><span class="af-form__description"> Radio 3</span></label>
</div>
<div class="af-form__radio-inline af-form__radio-inline--disabled">
<input class="af-form__input-radio" name="classic-inline" type="radio" id="radio28" disabled="disabled" />
<label class="af-form__label" for="radio28"><span class="af-form__description"> Disabled</span></label>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label">Custom Radio</label>
</div>
<div class="col-md-10">
<div class="af-form__radio-custom">
<input class="af-form__input-radio" name="classic-custom" type="radio" id="radio13" />
<label class="af-form__label" for="radio13"><span class="af-form__description"> Radio 1</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" name="classic-custom" type="radio" id="radio14" />
<label class="af-form__label" for="radio14"><span class="af-form__description"> Radio 2</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" name="classic-custom" type="radio" id="radio15" />
<label class="af-form__label" for="radio15"><span class="af-form__description"> Radio 3</span></label>
</div>
<div class="af-form__radio-custom af-form__radio-custom--disabled">
<input class="af-form__input-radio" name="classic-custom" type="radio" id="radio16" disabled="disabled" />
<label class="af-form__label" for="radio16"><span class="af-form__description"> Disabled</span></label>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="radioswitch">Switch radios *</label>
</div>
<div class="col-md-10">
<div class="af-form-switch">
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check0" name="placeName" value="0" type="radio" />
<label class="af-form__label" for="check0"><span class="af-form__description">Choix 1</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check1" name="placeName" value="1" type="radio" checked="checked" />
<label class="af-form__label" for="check1"><span class="af-form__description">Choix 2</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check2" name="placeName" value="2" type="radio" />
<label class="af-form__label" for="check2"><span class="af-form__description">Choix 3</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check3" name="placeName" value="3" type="radio" />
<label class="af-form__label" for="check3"><span class="af-form__description">Choix 44444444444444</span></label>
</div><span class="af-btn-switch-slider" style="left:64px;width:64px;"></span>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="inputtext1">Input text *</label>
</div>
<div class="col-md-10">
<div class="af-form__text">
<div class="af-form__text-wrapper">
<input class="af-form__input-text" name="inputtextname" type="text" />
</div><small class="af-form__message">Aide à la saisie</small>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="inputtext1">Input text *</label>
</div>
<div class="col-md-10">
<div class="af-form__text af-form__text--hasinfobulle">
<div class="af-form__text-wrapper">
<input class="af-form__input-text af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
<button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
</div><small class="af-form__message">Aide à la saisie</small>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="inputtext1">Input text *</label>
</div>
<div class="col-md-10">
<div class="af-form__text af-form__text--disabled">
<div class="af-form__text-wrapper">
<input class="af-form__input-text" name="inputtextname" type="text" disabled="disabled" />
</div><small class="af-form__message">Aide à la saisie</small>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="select1">Input Select *</label>
</div>
<div class="col-md-10">
<div class="af-form__select">
<div class="af-form__select-container">
<select class="af-form__input-select" name="inputtextname" type="text">
<option value="0">-Sélectionner-</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
</svg>
</div><small class="af-form__message">Aide à la saisie</small>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="select1">Inline fields *</label>
</div>
<div class="col-md-10">
<div class="af-form__fields-inline">
<div class="af-form__select af-form__input-inline">
<div class="af-form__select-container">
<select class="af-form__input-select" name="inputtextname" type="text">
<option value="0">-Sélectionner-</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
</svg>
</div><small class="af-form__message">Aide à la saisie</small>
</div>
<div class="af-form__text af-form__text--hasinfobulle">
<div class="af-form__text-wrapper">
<input class="af-form__input-text af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
<button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
</div><small class="af-form__message">Aide à la saisie</small>
</div>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="select1">Input Select *</label>
</div>
<div class="col-md-10">
<div class="af-form__select af-form__select--disabled">
<div class="af-form__select-container">
<select class="af-form__input-select" name="inputtextname" type="text" disabled="disabled">
<option value="0">-Sélectionner-</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
</svg>
</div><small class="af-form__message">Aide à la saisie</small>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label" for="textarea1">Input Textarea *</label>
</div>
<div class="col-md-10">
<div class="af-form__textarea">
<textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long"></textarea>
</div>
</div>
</div>
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label" for="textarea1">Input Textarea *</label>
</div>
<div class="col-md-10">
<div class="af-form__textarea af-form__textarea--disabled">
<textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long" disabled="disabled"></textarea>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="inputtext1">Input File *</label>
</div>
<div class="col-md-10">
<div class="af-form__file">
<div class="af-form__file-input">
<div class="drop-box hidden-mobile" id="uniqueid" style="position: relative;" aria-disabled="false">
<div>Glissez/déposez vos fichiers</div>
<input accept="image/jpeg, image/png, application/*" type="file" style="position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;" multiple="" autocomplete="off" name="placeImage" />
</div>
<button class="af-btn af-btn--file af-btn--hasiconLeft" type="button">
<svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
</svg> Parcourir
</button>
</div>
</div>
</div>
</div>
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--bad">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--bad">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--okay">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--okay">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--good">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--good">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--verygood">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--verygood">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--excellent">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--excellent">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__slider">
<div class="md-10">
<div style="width: 100%; margin: 0px;">
<div class="rc-slider rc-slider-with-marks">
<div class="rc-slider-rail"></div>
<div class="rc-slider-track" style="visibility: visible; left: 0%; width: 33.3333%;"></div>
<div class="rc-slider-step"><span class="rc-slider-dot rc-slider-dot-active" style="left: 0%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="left: 33.3333%;"></span><span class="rc-slider-dot" style="left: 66.6667%;"></span><span class="rc-slider-dot" style="left: 100%;"></span></div>
<div class="rc-slider-handle" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="3" aria-valuenow="1" aria-disabled="false" style="left: 33.3333%;"></div>
<div class="rc-slider-mark"><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 30%; margin-left: -15%; left: 0%;">VERY BAD</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 30%; margin-left: -15%; left: 33.3333%;">BAD</span><span class="rc-slider-mark-text" style="width: 30%; margin-left: -15%; left: 66.6667%;">NICE</span><span class="rc-slider-mark-text" style="width: 30%; margin-left: -15%; left: 100%;">VERY NICE</span></div>
</div>
</div>
</div>
</div>
</form>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-form {
background: $color-wild-sand;
padding: 1rem;
&__group {
margin-bottom: 3rem;
align-items: center;
display: flex;
flex-wrap: wrap;
&--label-top {
align-items: flex-start;
}
}
&__group-label {
font-weight: normal;
margin: 0;
}
&__group--required &__group-label {
&:after {
content: '*';
color: $color-red-error;
}
}
&__message {
position: absolute;
min-height: 1.6em;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin: 0.2rem 0;
.glyphicon {
margin-right: 0.4rem;
width: 17px;
}
&--error {
color: $color-red-axa;
}
&--warning {
color: $color-orange-dark;
}
}
&__input-cmplt {
margin-left: 1rem;
display: inline-flex;
}
&__fields-inline {
display: flex;
align-items: flex-start;
justify-content: flex-start;
.af-form__text {
padding: 0;
}
}
&__input-inline {
margin-right: 1rem;
}
/* Commons styles ****************************************************************/
&__label {
font-weight: normal;
cursor: pointer;
display: flex;
align-items: center;
margin: 0;
padding: 1rem 0;
}
&__indicator {
position: absolute;
width: 1rem;
height: 1rem;
background: $white;
border: 1px solid $color-silver;
left: 0;
top: 50%;
transform: translate(0, -50%);
.glyphicon-ok {
display: none;
position: absolute;
left: 2px;
top: 2px;
font-size: 0.625rem;
font-weight: 100;
width: 10px;
}
}
&__description {
padding-left: 1.8rem;
}
}React interactions
Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.
Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.
Generales Guidelines
Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.
Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.
1) Définition
Le champ de formulaire est l’outil de saisie de données libre par excellence. Sa variabilité et sa flexibilité permettent de répondre à quasiment tous les besoins métiers.
2) Use case
- Les champs de formulaires sont utilisés pour demander des données spécifiques, voire personnelles aux utilisateurs; ils doivent être utilisés à bon escient. Plus il y a de champs dans un formulaire, plus la complétion sera longue.
- Le champ de formulaire doit être utilisé uniquement pour des données libres, ne pouvant être comblé par un select, boutons radio ou checkboxes.
- Un champ de formulaire doit être suivi en fin de page d’un bouton CTA permettant d’enregistrer la saisie.
3) DO/DONT
Utiliser un champ de formulaire lorsque le type de saisie n’est pas adapté. Pour rappel, on utilisera:
- des boutons radios pour une liste de réponses mutuellement exclusives,
- des checkboxes pour une liste de réponses multiples.
- un select pour une réponse parmi une longue liste.
4) Utilisation
a) Position
- Le champ de formulaire doit être ferré à gauche dans le bloc parent.
- Le champ de formulaire peut prendre toute la largeur disponible dans le bloc parent ou la partager avec d’autres champs de manière égale (1/2 -1/2).
- Deux champs seront séparés de 16px d’espacement dans la largeur ou la hauteur.
b) Alignement
- Le label du champ doit être aligné horizontalement avec son label.
- Le label est aligné verticalement avec le champ.
c) Contenu
- Le placeholder dans le champ doit être présent et clair pour faciliter la saisie.
- Celui-ci doit être [$color-grey-1] tant que le champ n’est pas actif.
- Un bouton d’information peut accompagner le champ si celui-ci nécessite un contexte.
- Dans le cas d’un text area le champ de formulaire pourra s’étendre sur plusieurs lignes, avec un placeholder correspondant.
d) Rédaction
- Le label d’un champ doit clairement indiquer la donnée demandée à l’utilisateur.
- Le placeholder doit clairement indiquer un exemple de données correspondant au label.
e) Pictogrammes
Aucun pictogramme ne peut être utilisé en tant que placeholder, dans le label.
f) Variations
- Simple - Renvoie une erreur si laissé vide par l’utilisateur alors qu’obligatoire.
- Autocomplete - Un champ avec une fonction autocomplete sera pertinent dans le cas d’adresses ou d’autres données prévisibles. - La liste des options sera présentée directement en dessous du champ, comme dans le composant select.
- Format de donnée imposée (mail) - Renvoie une erreur si le format de donnée ne correspond pas.
- Mot de passe - Peut afficher un message d’erreur si la saisie ne correspond pas. - Peut afficher un indicateur de force pendant la saisie si les paramètres correspondent. - Peut afficher un indicateur de correspondance pendant la saisie si elle correspond.
- Text area - La zone de texte libre est dédiée à la saisie d’informations secondaires et de longueur variable : commentaire, avis etc.
g) États
- Inactif (vide)
- Actif (saisie effectuée)
- Focus (saisie en cours)
- Erreur
- Désactivé
Style
Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.
On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System
Imports SASS
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '~@axa-fr/react-toolkit-all/dist/style/bootstrap/grid.css';
@import '@axa-fr/react-toolkit-title/dist/title.scss';
@import '@axa-fr/react-toolkit-button/dist/button.scss';
@import '@axa-fr/react-toolkit-form-core/dist/form.scss';
@import '@axa-fr/react-toolkit-form-input-card/dist/card.scss';
@import '@axa-fr/react-toolkit-form-input-checkbox/dist/checkbox.scss';
@import '@axa-fr/react-toolkit-form-input-radio/dist/radio.scss';
@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss';
@import '@axa-fr/react-toolkit-form-input-pass/dist/pass.scss';
@import '@axa-fr/react-toolkit-form-input-textarea/dist/textarea.scss';
@import '@axa-fr/react-toolkit-form-input-switch/dist/switch.scss';
@import '@axa-fr/react-toolkit-form-input-slider/dist/slider.scss';
@import '@axa-fr/react-toolkit-form-input-select/dist/select.scss';
@import '@axa-fr/react-toolkit-form-input-file/dist/filebrowser.scss';
@import '@axa-fr/react-toolkit-form-input-date/dist/datepicker.scss';
@import '@axa-fr/react-toolkit-form-input-slider/dist/slider.scss';
Typography
Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.
| Class | Font-size (px/rem) | Font-weight | Font-family |
|---|---|---|---|
| .af-form | 16 / 1 | 400 | Source Sans Pro Regular |
Colors
BLEU AXA#00008f$color-axa
BLEU Action#3032c1$color-azur
BLEU Action focus#aaabf9$color-azur-focused
Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver