Form

A collection of fieldset and inputs.

Published

Last updated: 5.3.0

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

Prop Name	Description	Type	Default Value	Option(s)
icon_size	Customize the size of the input icon used	—	`medium`	—

Install

npm install @bolt/components-form

Dependencies

@bolt/components-headline

@bolt/core-v3.x

@bolt/elements-button

@bolt/elements-icon

@bolt/lazy-queue

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

Text input type

Helper text for this specific form input.

Text input type

Email input type

Password input type

URL input type

Telephone input type

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.

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

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

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

Email input type

Password input type

Personal Info

This is an error message for this specific fieldset.

Helper text for this specific fieldset.

Text input type

URL input type

Telephone input type

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.

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

Left-aligned

Center-aligned

Right-aligned

Select toppings

Pepperoni

Olives

Feta

Pineapple

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.

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

Select

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.

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

Describe the job

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.

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

Example of percent auto formatting

Example of dollar auto formatting

Example of yen auto formatting

Example of number auto formatting

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.

Search Input

A search input includes a search icon as a submit button.

Important Notes:

Set the type attribute to search for the input.

Use the search_button_label prop to render a unique label for the search button.

Demo

Twig

{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Employees or contractors',
      displayType: 'floating',
      attributes: {
        for: 'search',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      search_button_label: 'Search people',
      attributes: {
        placeholder: 'Employees or contractors',
        type: 'search',
        id: 'search',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    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.

Use Case: Campaign Landing Page

An existing example from Campaign Landing Pages.

Demo

Get the Report

(all fields are required)

First Name

Last Name

Email Address

Title

Company Name

Country

Receive periodic emails on key analyst reports, Pega events, and important news. You can unsubscribe at any time

Get the Report

(all fields are required)

First Name

Last Name

Email Address

Title

Company Name

Country

Receive periodic emails on key analyst reports, Pega events, and important news. You can unsubscribe at any time

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.

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

Email Address

Inline inputs: flexible width

Email Address

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.

Use Case: Multiple Columns

Use the grid to create multi-column form layouts.

Demo

View full page demo

Twig

{% set form_children %}
  {% set category_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Category',
        displayType: 'floating',
        attributes: {
          for: 'category',
        },
      } only %}
    {% endset %}
    {% set select %}
      {% include '@bolt-components-form/form-select.twig' with {
        options: [
          {
            type: 'option',
            value: '',
            label: '- Select a category -',
          },
          {
            type: 'option',
            value: 'option-a',
            label: 'Option A'
          },
          {
            type: 'option',
            value: 'option-b',
            label: 'Option B'
          }
        ],
        attributes: {
          id: 'category',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: select,
    } only %}
  {% endset %}
  {% set first_name_input %}
    {% 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 first name',
          type: 'text',
          id: 'first-name',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set last_name_input %}
    {% 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 last name',
          type: 'text',
          id: 'last-name',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set work_email_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Work email',
        displayType: 'floating',
        attributes: {
          for: 'work-email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter work email',
          type: 'email',
          id: 'work-email',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set phone_number_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Phone number',
        displayType: 'floating',
        attributes: {
          for: 'phone-number',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter phone number',
          type: 'tel',
          id: 'phone-number',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set country_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Country',
        displayType: 'floating',
        attributes: {
          for: 'country',
        },
      } only %}
    {% endset %}
    {% set select %}
      {% include '@bolt-components-form/form-select.twig' with {
        options: [
          {
            type: 'option',
            value: '',
            label: '- Select a country -',
          },
          {
            type: 'option',
            value: 'option-a',
            label: 'Option A'
          },
          {
            type: 'option',
            value: 'option-b',
            label: 'Option B'
          }
        ],
        attributes: {
          id: 'country',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: select,
    } only %}
  {% endset %}
  {% set message_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Message',
        displayType: 'floating',
        attributes: {
          for: 'message',
        },
      } only %}
    {% endset %}
    {% set textarea %}
      {% include '@bolt-components-form/form-textarea.twig' with {
        attributes: {
          placeholder: 'Enter a message',
          rows: 5,
          required: true,
          id: 'message',
        }
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: textarea,
    } only %}
  {% endset %}
  {% set agreement_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        displayType: 'inline-checkbox',
        attributes: {
          for: 'agreement',
          name: 'agreement',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          type: 'checkbox',
          id: 'agreement',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set submit_button %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Send',
      display: 'block',
      attributes: {
        type: 'submit'
      },
    } only %}
  {% endset %}


  {% include '@bolt-components-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '12',
        content: category_input,
      },
      {
        column_start: '1',
        column_span: '12 6@small',
        content: first_name_input,
      },
      {
        column_start: '1 7@small',
        column_span: '12 6@small',
        content: last_name_input,
      },
      {
        column_start: '1',
        column_span: '12 6@small',
        content: work_email_input,
      },
      {
        column_start: '1 7@small',
        column_span: '12 6@small',
        content: phone_number_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: country_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: message_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: agreement_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: submit_button,
      },
    ]
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children,
} only %}

HTML

Not available in plain HTML. Please use Twig.

form

form docs

Form

A collection of fieldset and inputs.

form element input field

Fieldset Legend

form label display

Fieldset Legend

form fieldset

Account Info

Personal Info

form radios and checkboxes

Select an alignment

Select toppings

form select

form textarea

form input auto format

form search

form use case campaign landing

Get the Report

Get the Report

form use case inline inputs

form use case multiple columns

form

form docs Show Code Hide Code

Form

A collection of fieldset and inputs.

form element input field Show Code Hide Code

Fieldset Legend

form label display Show Code Hide Code

Fieldset Legend

form fieldset Show Code Hide Code

Account Info

Personal Info

form radios and checkboxes Show Code Hide Code

Select an alignment

Select toppings

form select Show Code Hide Code

form textarea Show Code Hide Code

form input auto format Show Code Hide Code

form search Show Code Hide Code

form use case campaign landing Show Code Hide Code

Get the Report

Get the Report

form use case inline inputs Show Code Hide Code

form use case multiple columns Show Code Hide Code

form docs

form element input field

form label display

form fieldset

form radios and checkboxes

form select

form textarea

form input auto format

form search

form use case campaign landing

form use case inline inputs

form use case multiple columns