Radio and Checkbox Inputs A representation of an input radio fieldset. Important Notes: Set displayType: 'inline-radio' for each label when creating radio inputs. Set displayType: 'inline-checkbox' for each label when creating checkbox inputs. Set input type as radio for radio inputs. Set input type as checkbox for checkbox inputs. Make the label is clickable by adding a for attribute to the label element and an id (with the same name as for attribute) to the radio/checkbox element. Radio and checkbox inputs must be grouped with a fieldset. Demo

Select an alignment

Select toppings
Twig
{% set radios_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Left-aligned',
      displayType: 'inline-radio',
      attributes: {
        for: 'radio-left',
        name: 'radio-alignment'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'radio',
        id: 'radio-left',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Center-aligned',
      displayType: 'inline-radio',
      attributes: {
        for: 'radio-center',
        name: 'radio-alignment'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'radio',
        id: 'radio-center',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Right-aligned',
      displayType: 'inline-radio',
      attributes: {
        for: 'radio-right',
        name: 'radio-alignment'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'radio',
        id: 'radio-right',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}
{% set fieldset_children %}
  {% include '@bolt-components-form/form-radios.twig' with {
    children: radios_children
  } only %}
{% endset %}

{% include '@bolt-components-form/form-fieldset.twig' with {
  legendTitle: 'Select an alignment',
  children: fieldset_children
} only %}

{% set checkbox_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Pepperoni',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-pepperoni',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-pepperoni',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Olives',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-olives',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-olives',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Feta',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-feta',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-feta',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Pineapple',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-pineapple',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-pineapple',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}
{% set fieldset_children %}
  {% include '@bolt-components-form/form-checkboxes.twig' with {
      children: checkbox_children
    } only %}
{% endset %}

{% include '@bolt-components-form/form-fieldset.twig' with {
  legendTitle: 'Select toppings',
  children: fieldset_children,
} only %}
HTML
Not available in plain HTML. Please use Twig.