form docs

Form

A collection of fieldset and inputs.

Published Last updated: 4.5.0 Change log 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
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-button @bolt/components-headline @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue
We promise not to sell your email address
The username you entered is already taken.

form label positions

labelDisplayType: 'floating'

labelDisplayType: 'block', labelDisplay: 'before'

form element demo radio

Select an alignment

form element auto format

form element demo checkbox

Select toppings

If there were any server-side errors, you'd see them here
Pick at least two of the following

form element demo select

form element demo textarea

form full campaign landing

Get the Report

(all fields are required)

form inline inputs

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.

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.

form card theme variations

Get the Report

(all fields are required)

Get the Report

(all fields are required)

Get the Report

(all fields are required)

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