Form

A collection of fieldset and inputs.

Published

Last updated: 4.5.0

Github

NPM

Twig Usage

{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'This is the label',
      displayType: 'block'
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'This is the placeholder text.',
        required: true,
        type: 'text',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    labelDisplay: 'before',
    label: label,
    children: input
  } only %}
  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Submit',
    attributes: {
      type: 'submit',
    }
  } only %}
{% endset %}
{% 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-button

@bolt/components-headline

@bolt/components-icon

@bolt/core-v3.x

@bolt/lazy-queue

Title

Disabled Title

Email

We promise not to sell your email address

Password

Search

Username

The username you entered is already taken.

labelDisplayType: 'block', labelDisplay: 'before'

Single Radio

Select an alignment

Left-aligned

Center-aligned

Right-aligned

Example of percent auto formatting (add attribute 'data-bolt-format-input="percent"')

Example of dollar auto formatting (add attribute 'data-bolt-format-input="currency-us"')

Example of yen auto formatting (add attribute 'data-bolt-format-input="currency-ja"')

Example of number auto formatting (add attribute 'data-bolt-format-input="number"')

I accept the terms and conditions

Select toppings

If there were any server-side errors, you'd see them here

Pick at least two of the following

Pepperoni

Olives

Feta

Pineapple

Select

Job Description

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

Inline inputs: auto width

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.

Email Address

Inline inputs: flexible width

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.

Email Address

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

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

(Note: forms do not offically support dark themes yet. Use at your own risk.)

form

form docs

Form

A collection of fieldset and inputs.

form element demo input element

form element demo input element disabled search

form element demo input element disabled

form element demo input element email

form element demo input element password

form element demo input element search

form element demo input element server errors

form label positions

labelDisplayType: 'floating'

labelDisplayType: 'block', labelDisplay: 'before'

form element demo radio

form element demo radio fieldset

Select an alignment

form element auto format

form element demo checkbox

form element demo checkbox fieldset

Select toppings

form element demo select

form element demo textarea

form full campaign landing

Get the Report

form inline inputs

Inline inputs: auto width

Inline inputs: flexible width

form card theme variations

Get the Report

Get the Report

Get the Report

form

form docs Show Code Hide Code

Form

A collection of fieldset and inputs.

form element demo input element Show Code Hide Code

form element demo input element disabled search Show Code Hide Code

form element demo input element disabled Show Code Hide Code

form element demo input element email Show Code Hide Code

form element demo input element password Show Code Hide Code

form element demo input element search Show Code Hide Code

form element demo input element server errors Show Code Hide Code

form label positions Show Code Hide Code

labelDisplayType: 'floating'

labelDisplayType: 'block', labelDisplay: 'before'

form element demo radio Show Code Hide Code

form element demo radio fieldset Show Code Hide Code

Select an alignment

form element auto format Show Code Hide Code

form element demo checkbox Show Code Hide Code

form element demo checkbox fieldset Show Code Hide Code

Select toppings

form element demo select Show Code Hide Code

form element demo textarea Show Code Hide Code

form full campaign landing Show Code Hide Code

Get the Report

form inline inputs Show Code Hide Code

Inline inputs: auto width

Inline inputs: flexible width

form card theme variations Show Code Hide Code

Get the Report

Get the Report

Get the Report

form docs

form element demo input element

form element demo input element disabled search

form element demo input element disabled

form element demo input element email

form element demo input element password

form element demo input element search

form element demo input element server errors

form label positions

form element demo radio

form element demo radio fieldset

form element auto format

form element demo checkbox

form element demo checkbox fieldset

form element demo select

form element demo textarea

form full campaign landing

form inline inputs

form card theme variations