form docs

Form

A collection of fieldset and inputs.

Published Last updated: 5.1.0 Change log Github NPM
Twig Usage 
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'First Name',
      displayType: 'floating',
      attributes: {
        for: 'first-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your first name',
        required: true,
        type: 'text',
        id: 'first-name',
      },
    } 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: 'Last Name',
      displayType: 'floating',
      attributes: {
        for: 'last-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your last name',
        required: true,
        type: 'text',
        id: 'last-name',
      },
    } 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: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your email',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } 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: 'Title',
      displayType: 'floating',
      attributes: {
        for: 'job-title',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your current job title',
        required: true,
        type: 'text',
        id: 'job-title',
      },
    } 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: 'Company Name',
      displayType: 'floating',
      attributes: {
        for: 'company-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter the name of your company',
        required: true,
        type: 'text',
        id: 'company-name',
      },
    } 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: 'Country',
      displayType: 'floating',
    } only %}
  {% endset %}

  {% set select %}
    {% include '@bolt-components-form/form-select.twig' with {
      attributes: {
        required: true
      },
      options: [
        {
          type: 'option',
          value: '',
          label: '- Select an Country -',
          attributes: {
            disabled: true
          }
        },
        {
          type: 'option',
          value: 'a',
          label: 'Argentina'
        },
        {
          type: 'option',
          value: 'b',
          label: 'Belgium'
        },
        {
          type: 'option',
          value: 'c',
          label: 'Croatia'
        }
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: select,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Receive periodic emails on key analyst reports, Pega events, and important news.  You can unsubscribe at any time',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-id',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-id',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Download Now',
    width: 'full',
    icon: {
      name: 'download'
    }
  } only %}
{% endset %}

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Get the Report',
  size: 'xlarge'
} only %}
{% include '@bolt-components-headline/text.twig' with {
  text: '(all fields are required)',
  size: 'small'
} only %}
{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only  %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
icon_size

Customize the size of the input icon used

 — medium
  • —
Install Install 
npm install @bolt/components-form
Dependencies @bolt/components-headline @bolt/core-v3.x @bolt/elements-button @bolt/elements-icon @bolt/lazy-queue

form element input field

Basic Form Inputs A specific type of form input should be used based on each use case. Important Notes: Each form input can be composed of form-label.twig, form-input.twig, and form-element.twig. To improve accessibility and usability, make sure to include the type attribute for each input. Reference all valid values on this MDN article. All form inputs must have related <label> elements. Required form inputs should have the required attribute. Disabled form inputs should have the disabled attribute. However, this should be used sparingly because disabled inputs are bad for accessibility. To display helper text for a specific form input, use the descriptionText prop in form-element.twig. There are options when it comes to visually displaying labels. Reference the form label positions doc for all options. All inputs must be wrapped with a fieldset using form-fieldset.twig. Multiple fieldsets can be used if it is necessary to group certain form inputs. All form elements must be rendered inside a form using form.twig. Demo

Fieldset Legend
Helper text for this specific form input.
Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text',
          type: 'text',
          id: 'text',
        },
      } only %}
    {% endset %}
    {% set icon_info_circle %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'info-circle',
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
      descriptionText: icon_info_circle ~ '<small>Helper text for this specific form input.</small>',
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'required-text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text (required)',
          type: 'text',
          id: 'required-text',
          required: true,
        },
      } only %}
    {% endset %}
    {% set icon_info_circle %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'info-circle',
      } 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: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'disabled-text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text (disabled)',
          type: 'text',
          id: 'disabled-text',
          disabled: true,
        },
      } only %}
    {% endset %}
    {% set icon_info_circle %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'info-circle',
      } 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: 'Email input type',
        displayType: 'floating',
        attributes: {
          for: 'email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter email',
          type: 'email',
          id: 'email',
        },
      } 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: 'Password input type',
        displayType: 'floating',
        attributes: {
          for: 'password',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter password',
          type: 'password',
          id: 'password',
        },
      } 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: 'URL input type',
        displayType: 'floating',
        attributes: {
          for: 'url',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter URL',
          type: 'url',
          id: 'url',
        },
      } 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: 'Telephone input type',
        displayType: 'floating',
        attributes: {
          for: 'tel',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter telephone number',
          type: 'tel',
          id: 'tel',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Fieldset Legend',
    legendInnerAttributes: {
      class: 'u-bolt-visuallyhidden',
    },
    children: fieldset_children,
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form label display

Input Label Display Adjust the display of a particular input label. Important Notes: The displayType prop on form-label.twig determines how an input label is visually displayed. floating will render a floating label, while block will render a block label before the form input. For block labels, it is also needed to set the labelDisplay prop to before on form-element.twig. Demo

Fieldset Legend
Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Floating Label',
        displayType: 'floating',
        attributes: {
          for: 'floating-label',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter value (floating label)',
          type: 'text',
          id: 'floating-label',
        },
      } 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: '<strong>Block Label</strong>',
        displayType: 'block',
        attributes: {
          for: 'block-label',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter value (block label)',
          type: 'text',
          id: 'block-label',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
      labelDisplay: 'before',
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Fieldset Legend',
    legendInnerAttributes: {
      class: 'u-bolt-visuallyhidden',
    },
    children: fieldset_children,
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form fieldset

Form Fieldset A fieldset is for grouping one or many form inputs. Important Notes: All inputs must be wrapped with a fieldset using form-fieldset.twig. Multiple fieldsets can be used if it is necessary to group certain form inputs. Each fieldset must have a legend. Use legendTitle to set the legend text; use legendSize to set the legend text size. To visually hide a legend, use legendAttributes to add the class u-bolt-visuallyhidden. This will still allow screen readers to access the legend. Set helper text for a fieldset via the descriptionText prop. Set error messages for a fieldset via the errors prop. Demo

Account Info

Personal Info
This is an error message for this specific fieldset.
Helper text for this specific fieldset.
Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Email input type',
        displayType: 'floating',
        attributes: {
          for: 'email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter email',
          type: 'email',
          id: 'email',
        },
      } 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: 'Password input type',
        displayType: 'floating',
        attributes: {
          for: 'password',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter password',
          type: 'password',
          id: 'password',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

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

  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text',
          type: 'text',
          id: 'text',
        },
      } 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: 'URL input type',
        displayType: 'floating',
        attributes: {
          for: 'url',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter URL',
          type: 'url',
          id: 'url',
        },
      } 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: 'Telephone input type',
        displayType: 'floating',
        attributes: {
          for: 'tel',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter telephone number',
          type: 'tel',
          id: 'tel',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% set icon_info_circle %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'info-circle',
    } only %}
  {% endset %}

  {% set icon_warning %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'warning',
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Personal Info',
    children: fieldset_children,
    descriptionText: icon_info_circle ~ '<small>Helper text for this specific fieldset.</small>',
    errors: icon_warning ~ ' This is an error message for this specific fieldset.'
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form radios and checkboxes

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.

form select

Select Select inputs are for choosing a single option from a list. Important Notes: Add select options as an array to the form-select.twig include statement. Rememeber to set type as an option and add label and value attributes to each of the options. Select elements do not have placeholder text, to create one, use an <option> element with empty value, then use the option label as the placeholder text (eg. “- Select an option -”). Demo
Twig
{% set label %}
  {% include '@bolt-components-form/form-label.twig' with {
    title: 'Select',
    displayType: 'floating',
  } only %}
{% endset %}
{% set select %}
  {% include '@bolt-components-form/form-select.twig' with {
    options: [
      {
        type: 'option',
        value: '',
        label: '- Select an option -'
      },
      {
        type: 'option',
        value: 'option-a',
        label: 'Option A'
      },
      {
        type: 'option',
        value: 'option-b',
        label: 'Option B'
      }
    ]
  } only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
  label: label,
  children: select,
} only %}
HTML
Not available in plain HTML. Please use Twig.

form textarea

Textarea Textarea is used for long form text input. Important Notes: Use form-textarea.twig include statement. Add the attributes you need, for example a placeholder or required. Demo
Twig
{% set label %}
  {% include '@bolt-components-form/form-label.twig' with {
    title: 'Describe the job',
    displayType: 'floating',
  } only %}
{% endset %}
{% set textarea %}
  {% include '@bolt-components-form/form-textarea.twig' with {
    attributes: {
      placeholder: 'Describe the job'
    }
  } only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
  label: label,
  children: textarea,
} only %}
HTML
Not available in plain HTML. Please use Twig.

form input auto format

Auto Format Inputs Input fields with autoformatting. Important Notes:

Add proper data-bolt-format-input to the form-input.twig attributes object in order to autoformat a given value into input field. For example:

'data-bolt-format-input': 'percent' for percentage autoformatting. 'data-bolt-format-input': 'currency-us' for dollar autoformatting. 'data-bolt-format-input': 'currency-ja' for yen autoformatting. 'data-bolt-format-input': 'number' for number autoformatting. Demo
Twig
{% set form_children %}
  {% set for_value = 'percent' %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Example of percent auto formatting (add attribute \'data-bolt-format-input="percent"\')',
        attributes: {
          for: for_value
        },
        displayType: 'block'
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'E.g. 10',
          required: true,
          type: 'number',
          id: for_value,
          'data-bolt-format-input': 'percent',
          min: 0,
          max: 100
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      labelDisplay: 'before',
      label: label,
      children: input
    } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form use case campaign landing

Use Case: Campaign Landing Page An existing example from Campaign Landing Pages. Demo

Get the Report

(all fields are required)

Get the Report

(all fields are required)
Twig
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'First Name',
      displayType: 'floating',
      attributes: {
        for: 'first-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your first name',
        required: true,
        type: 'text',
        id: 'first-name',
      },
    } 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: 'Last Name',
      displayType: 'floating',
      attributes: {
        for: 'last-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your last name',
        required: true,
        type: 'text',
        id: 'last-name',
      },
    } 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: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your email',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } 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: 'Title',
      displayType: 'floating',
      attributes: {
        for: 'job-title',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your current job title',
        required: true,
        type: 'text',
        id: 'job-title',
      },
    } 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: 'Company Name',
      displayType: 'floating',
      attributes: {
        for: 'company-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter the name of your company',
        required: true,
        type: 'text',
        id: 'company-name',
      },
    } 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: 'Country',
      displayType: 'floating',
    } only %}
  {% endset %}

  {% set select %}
    {% include '@bolt-components-form/form-select.twig' with {
      attributes: {
        required: true
      },
      options: [
        {
          type: 'option',
          value: '',
          label: '- Select an Country -',
          attributes: {
            disabled: true
          }
        },
        {
          type: 'option',
          value: 'a',
          label: 'Argentina'
        },
        {
          type: 'option',
          value: 'b',
          label: 'Belgium'
        },
        {
          type: 'option',
          value: 'c',
          label: 'Croatia'
        }
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: select,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Receive periodic emails on key analyst reports, Pega events, and important news.  You can unsubscribe at any time',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-id',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-id',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Download Now',
    width: 'full',
    icon: {
      name: 'download'
    }
  } only %}
{% endset %}

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Get the Report',
  size: 'xlarge'
} only %}
{% include '@bolt-components-headline/text.twig' with {
  text: '(all fields are required)',
  size: 'small'
} only %}
{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only  %}
HTML
Not available in plain HTML. Please use Twig.

form use case inline inputs

Use Case: Inline Inputs An example of a inline inputs. Important Notes: Use a bolt-list with display set to inline, and pass each input as an item. This will create an inline layout with multiple inputs. The width of each input will be adjusted to fit its content. Use a bolt-list with display set to flex, and pass each input as an item. This will create a flexible layout with multiple inputs. The width of each input will be adjusted to the available space to fill up the full width of the layout. Demo Inline inputs: auto width
Inline inputs: flexible width
Twig
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter email address',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}

{% set submit_button %}
  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Sign Up Now',
    type: 'submit'
  } only %}
{% endset %}

{% include '@bolt-components-list/list.twig' with {
  display: 'inline',
  spacing: 'xsmall',
  align: 'start',
  valign: 'start',
  items: [
    form_children,
    submit_button
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.