form docs

2.24.1

Form

Bolt component for forms and form elements

A collection of fieldsets to create a form. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-form
  {% include "@bolt-components-form/form.twig" with {
  text: "This is a form",
  url: "#!",
} only %}

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
We promise not to sell your email address
The username you entered is already taken.

Select an alignment

Select toppings

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

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.

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.)

Debug Panel