{{#> web/layout/default title="Field Group" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Required</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label FieldGroup__label--required" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Hidden Label</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Helper Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup" aria-describedby="field-group-helper-text">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
        <div id="field-group-helper-text" class="FieldGroup__helperText">Helper text</div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup" disabled>
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Validation State with Validation Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup FieldGroup--success" aria-describedby="field-group-success-validation-text">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
        <div id="field-group-success-validation-text" class="FieldGroup__validationText">Validation text</div>
      </fieldset>

      <fieldset class="FieldGroup FieldGroup--warning" aria-describedby="field-group-warning-validation-text">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
        <div id="field-group-warning-validation-text" class="FieldGroup__validationText">Validation text</div>
      </fieldset>

      <fieldset class="FieldGroup FieldGroup--danger" aria-describedby="field-group-danger-validation-text">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
        <div id="field-group-danger-validation-text" class="FieldGroup__validationText">
          <ul>
            <li>First validation text</li>
            <li>Second validation text</li>
          </ul>
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Fluid</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup FieldGroup--fluid">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <div class="docs-Box">Item</div>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Grouped Checkboxes</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <label for="checkbox-default-checked" class="Checkbox">
            <input type="checkbox" id="checkbox-default-checked" class="Checkbox__input" name="checkbox-default-checked" checked />
            <span class="Checkbox__text">
            <span class="Checkbox__label">Checkbox Label</span>
          </span>
          </label>

          <label for="checkbox-default" class="Checkbox">
            <input type="checkbox" id="checkbox-default" class="Checkbox__input" name="checkbox-default" />
            <span class="Checkbox__text">
            <span class="Checkbox__label">Checkbox Label</span>
          </span>
          </label>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Grouped Radios</h2>

    <div class="docs-Stack docs-Stack--start">

      <fieldset class="FieldGroup">
        <legend class="accessibility-hidden">Label</legend>
        <div class="FieldGroup__label" aria-hidden="true">Label</div>
        <div class="FieldGroup__fields">
          <!-- Custom items: start -->
          <label for="radio-default-checked" class="Radio">
            <input type="radio" id="radio-default-checked" class="Radio__input" name="radio-default" checked />
            <span class="Radio__text">
            <span class="Radio__label">Radio Label</span>
          </span>
          </label>

          <label for="radio-default" class="Radio">
            <input type="radio" id="radio-default" class="Radio__input" name="radio-default" />
            <span class="Radio__text">
            <span class="Radio__label">Radio Label</span>
          </span>
          </label>
          <!-- Custom items: end -->
        </div>
      </fieldset>

    </div>

  </div>

</section>

{{/web/layout/default }}