form docs

2.24.1

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-v3.x @bolt/lazy-queue

Overview

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 Testing Steps

Usage

  {% include "@bolt-components-form/form.twig" with {
  text: "This is a form",
  url: "#!",
} 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
  • —

form element demo input element

form element demo input element disabled

form element demo input element email

We promise not to sell your email address

form element demo input element password

form element demo input element server errors

The username you entered is already taken.

form element demo radio

form element demo radio fieldset

Select an alignment

form element demo checkbox

form element demo checkbox fieldset

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