form docs

2.11.2

Form

Bolt component for forms and form elements

Published

History
View changes
Install
yarn add @bolt/components-form
Source code
View on Github
Dependencies
@bolt/components-button @bolt/components-headline @bolt/components-icon @bolt/core

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
Overview Usage Schema Edit this page
{% 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.