Radio fieldset

Default radio fieldset

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

      
  •           
<fieldset class="radio-fieldset">

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

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

</fieldset>

Two columns

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

      
  •           
<fieldset class="radio-fieldset">

  <div class="radio-fieldset__wrapper">
    <legend class="radio-fieldset__heading">Radio two columns:</legend>

    <div class="radio-fieldset__list --cols-2">
                      <div class="f-radio">
  <input type="radio" class="f-radio__input" id="first-radio-two-cols" name="radio-fieldset-two-columns" value="radio-button-01" checked="checked">
  <label class="f-label" for="first-radio-two-cols">
  <span class="f-label__title">First radio</span>
</label>
</div>
                    <div class="f-radio">
  <input type="radio" class="f-radio__input" id="second-radio-two-cols" name="radio-fieldset-two-columns" value="radio-button-02">
  <label class="f-label" for="second-radio-two-cols">
  <span class="f-label__title">Second radio</span>
</label>
</div>
                    <div class="f-radio">
  <input type="radio" class="f-radio__input" id="third-radio-two-cols" name="radio-fieldset-two-columns" value="radio-button-03">
  <label class="f-label" for="third-radio-two-cols">
  <span class="f-label__title">Third radio</span>
</label>
</div>
                    <div class="f-radio">
  <input type="radio" class="f-radio__input" id="fourth-radio-two-cols" name="radio-fieldset-two-columns" value="radio-button-04">
  <label class="f-label" for="fourth-radio-two-cols">
  <span class="f-label__title">Fourth radio</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 `radio`."
    }
  }
}