Concorde UI component — Fieldset. Default Doc ID: core/components/ui/form/fieldset/fieldset. Keywords: Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html.

Fieldset

Variant

<sonic-fieldset variant="default" >
      Default
    </sonic-fieldset>
    <sonic-fieldset variant="ghost" >
      Ghost
    </sonic-fieldset>
    <sonic-fieldset variant="shadow" >
      Shadow
    </sonic-fieldset>

Legend

<sonic-fieldset>
    <sonic-legend label="Legend via attribut : label" description="Description via attribut : description">
    </sonic-legend>
  </sonic-fieldset>
  <sonic-fieldset>
    <sonic-legend iconLibrary="iconoir"  iconName="pin-alt">
      Custom legend via <b>slot</b>
      <sonic-legend-description>
        Description via composant : sonic-legend-description
      </sonic-legend-description>
    </sonic-legend>
  </sonic-fieldset>

Short hand

<sonic-fieldset
    label="All props on fieldset tag"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    iconLibrary="iconoir"
    iconName="user">
  </sonic-fieldset>

Example of use

<sonic-div formDataProvider="user_create">
    <form action="/inscription?lang=fr" method="POST" class="mb-20" accept-charset="UTF-8" id="youpla">
      <sonic-fieldset form="formid" collapsible="true" collapsed="false">
        <sonic-legend iconLibrary="iconoir"  iconName="user">
          Informations personnelles
          <span slot="description">Description du fieldset lorem ipsum dolor</span>
          <sonic-pop class="inline-block" slot="suffix">
            <sonic-button shape="circle" variant="ghost">
              <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon
            ></sonic-button>
            <sonic-menu slot="content" minWidth="12rem">
              <sonic-menu-item>Mentions légales</sonic-menu-item>
              <sonic-menu-item>Conditions générales d'utilisation</sonic-menu-item>
            </sonic-menu>
          </sonic-pop>
        </sonic-legend>
        <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-form-layout>
      </sonic-fieldset>
      <sonic-fieldset form="formid" collapsible="true" collapsed="false">
        <sonic-legend iconLibrary="iconoir"  iconName="pin-alt"> Coordonnées </sonic-legend>
        <sonic-form-layout>
          <sonic-input autocomplete="postal-code" label="Code postal" name="cp"></sonic-input>
          <sonic-input autocomplete="address-level2" label="Ville" name="ville"></sonic-input>
        </sonic-form-layout>
      </sonic-fieldset>
      <div class="">
        <sonic-button submit type="primary">
          <sonic-icon  library="iconoir" name="check"></sonic-icon>
          S'inscrire
        </sonic-button>
        <sonic-tooltip class="inline-flex" label="Vous êtes sûr(e) ? 🙄">
          <sonic-button size="sm" variant="ghost"> Continuer sans m'inscrire </sonic-button>
        </sonic-tooltip>
      </div>
    </form>
    <div dataProvider="user_create" class="my-6 text-neutral-600 p-5 rounded-xl shadow-lg">
       <div class="font-bold text-lg text-neutral-400">Submitted informations...</div>
      <div class="text-lg my-2">
        <sonic-value key="nom" class="font-bold"></sonic-value>
        <sonic-value key="prenom"></sonic-value>
      </div>
      <div class="text-sm">
        <sonic-value key="sexe"></sonic-value>
        <sonic-value key="date_naissance"></sonic-value>
      </div>
      <div class="text-sm">
        <sonic-value key="email"></sonic-value>
        <sonic-value key="cp"></sonic-value>
        <sonic-value key="ville"></sonic-value></div>
    </div>
  </sonic-div>