Checkbox fieldset

Default checkbox fieldset

  • Name of checkbox fieldset: 
  •         {% include "@Components/forms/checkbox-fieldset/checkbox-fieldset.twig" with { props: {
  title: "Name of checkbox fieldset:",
  inputs: [{
    id: "first-checkbox",
    value: "checkbox-button-01",
    label: "First checkbox",
    name: "checkbox-fieldset",
    checked: true
  },
  {
    id: "second-checkbox",
    value: "checkbox-button-02",
    label: "Second checkbox",
    name: "checkbox-fieldset"
  },
  {
    id: "third-checkbox",
    value: "checkbox-button-03",
    label: "Third checkbox",
    name: "checkbox-fieldset"
  },
  {
    id: "fourth-checkbox",
    value: "checkbox-button-04",
    label: "Fourth checkbox",
    name: "checkbox-fieldset"
  }]
} } %}

      
  •           
<fieldset class="checkbox-fieldset">
  <div class="checkbox-fieldset__wrapper">
    <legend class="checkbox-fieldset__heading">Name of checkbox fieldset:</legend>

    <div class="checkbox-fieldset__list ">
                      <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="first-checkbox" name="checkbox-fieldset" value="checkbox-button-01" checked="checked" data-title="First checkbox">
  <label class="f-label" for="first-checkbox">
  <span class="f-label__title">First checkbox</span>
</label>
</div>
                    <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="second-checkbox" name="checkbox-fieldset" value="checkbox-button-02" data-title="Second checkbox">
  <label class="f-label" for="second-checkbox">
  <span class="f-label__title">Second checkbox</span>
</label>
</div>
                    <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="third-checkbox" name="checkbox-fieldset" value="checkbox-button-03" data-title="Third checkbox">
  <label class="f-label" for="third-checkbox">
  <span class="f-label__title">Third checkbox</span>
</label>
</div>
                    <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="fourth-checkbox" name="checkbox-fieldset" value="checkbox-button-04" data-title="Fourth checkbox">
  <label class="f-label" for="fourth-checkbox">
  <span class="f-label__title">Fourth checkbox</span>
</label>
</div>
          </div>
  </div>

</fieldset>

Default checkbox fieldset

  • Name of checkbox fieldset: 
  •         {% include "@Components/forms/checkbox-fieldset/checkbox-fieldset.twig" with {props: {
  title: "Name of checkbox fieldset:",
  columns: 2,
  inputs: [{
    id: "first-checkbox-two-columns",
    value: "checkbox-button-01",
    label: "First checkbox",
    name: "two-columns",
    checked: true
  },
  {
    id: "second-checkbox-two-columns",
    value: "checkbox-button-02",
    label: "Second checkbox",
    name: "two-columns"
  },
  {
    id: "third-checkbox-two-columns",
    value: "checkbox-button-03",
    label: "Third checkbox",
    name: "two-columns"
  },
  {
    id: "fourth-checkbox-two-columns",
    value: "checkbox-button-04",
    label: "Fourth checkbox",
    name: "two-columns"
  }]
}} %}

      
  •           
<fieldset class="checkbox-fieldset">
  <div class="checkbox-fieldset__wrapper">
    <legend class="checkbox-fieldset__heading">Name of checkbox fieldset:</legend>

    <div class="checkbox-fieldset__list --cols-2">
                      <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="first-checkbox-two-columns" name="two-columns" value="checkbox-button-01" checked="checked" data-title="First checkbox">
  <label class="f-label" for="first-checkbox-two-columns">
  <span class="f-label__title">First checkbox</span>
</label>
</div>
                    <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="second-checkbox-two-columns" name="two-columns" value="checkbox-button-02" data-title="Second checkbox">
  <label class="f-label" for="second-checkbox-two-columns">
  <span class="f-label__title">Second checkbox</span>
</label>
</div>
                    <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="third-checkbox-two-columns" name="two-columns" value="checkbox-button-03" data-title="Third checkbox">
  <label class="f-label" for="third-checkbox-two-columns">
  <span class="f-label__title">Third checkbox</span>
</label>
</div>
                    <div class="checkbox">
  <input type="checkbox" class="checkbox__input" id="fourth-checkbox-two-columns" name="two-columns" value="checkbox-button-04" data-title="Fourth checkbox">
  <label class="f-label" for="fourth-checkbox-two-columns">
  <span class="f-label__title">Fourth checkbox</span>
</label>
</div>
          </div>
  </div>

</fieldset>

Schema 

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the fieldset"
    },
    "inputs": {
      "type": "array of objects",
      "description": "All props are documented by the component `checkbox`."
    }
  }
}