Foehn Design System

Avs 13 

<fieldset>

    <legend>Votre numéro &lt;abbr title=&quot;Numero AVS&quot;&gt;AVS13&lt;/abbr&gt;</legend>

    <small class="text-secondary">Par exemple, 756 1234 5678 97</small>

    <div class="vd-form-flex">

        <div class="vd-form-flex__item vd-form-flex__item--3-char-width">
            <div class="form-group">
                <label for="inputAvs1" class="sr-only">Code du pays</label>
                <small id="inputAvs1Help" class="form-text text-secondary"><span class="sr-only">Saisir trois chiffres: <abbr title="Exemple">Ex.</abbr> 756</span></small>
                <input class="form-control" type="number" id="inputAvs1" name="testInput" value="" required aria-required="true" aria-describedby="inputAvs1Help " pattern="[0-9]*" min="1" max="999" size="3">
            </div>

        </div>

        <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
            <div class="form-group">
                <label for="inputAvs2" class="sr-only">Premiers chiffres aléatoires et anonymes</label>
                <small id="inputAvs2Help" class="form-text text-secondary"><span class="sr-only">Saisir quatres chiffres: <abbr title="Exemple">Ex.</abbr>: 1234</span></small>
                <input class="form-control" type="number" id="inputAvs2" name="testInput" value="" required aria-required="true" aria-describedby="inputAvs2Help " pattern="[0-9]*" min="1" max="9999" size="4">
            </div>

        </div>

        <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
            <div class="form-group">
                <label for="inputAvs3" class="sr-only">Deuxièmes chiffres aléatoires et anonymes</label>
                <small id="inputAvs3Help" class="form-text text-secondary"><span class="sr-only">Saisir quatres chiffres: <abbr title="Exemple">Ex.</abbr>: 5678</span></small>
                <input class="form-control" type="number" id="inputAvs3" name="testInput" value="" required aria-required="true" aria-describedby="inputAvs3Help " pattern="[0-9]*" min="1" max="9999" size="4">
            </div>

        </div>

        <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
            <div class="form-group">
                <label for="inputAvs4" class="sr-only">Chiffre aléatoire et anonyme et numéro de contrôle</label>
                <small id="inputAvs4Help" class="form-text text-secondary"><span class="sr-only">Saisir deux chiffres: <abbr title="Exemple">Ex.</abbr>: 97</span></small>
                <input class="form-control" type="number" id="inputAvs4" name="testInput" value="" required aria-required="true" aria-describedby="inputAvs4Help " pattern="[0-9]*" min="1" max="99" size="2">
            </div>

        </div>

    </div>

</fieldset>
 
<fieldset>

  <legend>{{ legend }}</legend>

  <small class="text-secondary">{{ helpText }}</small>

  <div class="vd-form-flex">

    <div class="vd-form-flex__item vd-form-flex__item--3-char-width">
      {% render '@input--number', input1 , true%}
    </div>

    <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
      {% render '@input--number', input2 , true%}
    </div>

    <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
      {% render '@input--number', input3 , true%}
    </div>

    <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
      {% render '@input--number', input4 , true%}
    </div>

  </div>

</fieldset>
 
{
  "legend": "Votre numéro <abbr title=\"Numero AVS\">AVS13</abbr>",
  "helpText": "Par exemple, 756 1234 5678 97",
  "input1": {
    "id": "inputAvs1",
    "label": "Code du pays",
    "labelHidden": true,
    "max": "999",
    "size": "3",
    "helpText": "<span class=\"sr-only\">Saisir trois chiffres: <abbr title=\"Exemple\">Ex.</abbr> 756</span>"
  },
  "input2": {
    "id": "inputAvs2",
    "label": "Premiers chiffres aléatoires et anonymes",
    "labelHidden": true,
    "max": "9999",
    "size": "4",
    "helpText": "<span class=\"sr-only\">Saisir quatres chiffres: <abbr title=\"Exemple\">Ex.</abbr>: 1234</span>"
  },
  "input3": {
    "id": "inputAvs3",
    "label": "Deuxièmes chiffres aléatoires et anonymes",
    "labelHidden": true,
    "max": "9999",
    "size": "4",
    "helpText": "<span class=\"sr-only\">Saisir quatres chiffres: <abbr title=\"Exemple\">Ex.</abbr>: 5678</span>"
  },
  "input4": {
    "id": "inputAvs4",
    "label": "Chiffre aléatoire et anonyme et numéro de contrôle",
    "labelHidden": true,
    "max": "99",
    "size": "2",
    "helpText": "<span class=\"sr-only\">Saisir deux chiffres: <abbr title=\"Exemple\">Ex.</abbr>: 97</span>"
  }
}

No notes defined.