Concorde UI component — Form-layout. autocomplete="email" Doc ID: core/components/ui/form/form-layout/form-layout. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html.

Form-layout

<form>
    <sonic-form-layout>
      <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
      <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
      <sonic-select autocomplete="sex" label="Sexe" name="sexe">
        <option value="" selected="selected">- Sélectionner -</option>
        <option value="-">Je préfère ne pas le dire</option>
        <option value="Homme">Homme</option>
        <option value="Femme">Femme</option>
      </sonic-select>
      <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
      <sonic-divider></sonic-divider>
      <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
      <sonic-input
        autocomplete="email"
        label="Confirmer votre e-mail"
        name="email_confirmation"
        type="email"
      ></sonic-input>
      <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
      <sonic-input
        autocomplete="new-password"
        label="Confirmer votre mot de passe"
        name="password_confirmation"
        type="password"
      ></sonic-input>
      <sonic-divider></sonic-divider>
      <sonic-textarea label="Message" rows="5">
      </sonic-textarea>
      <sonic-switch>Activer une superbe option</sonic-switch>
      <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
      <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
      <sonic-form-actions>
        <sonic-button type="success">Valider</sonic-button> 
      </sonic-form-actions>
    </sonic-form-layout>
  </form >