Form

A collection of fieldset and inputs.

Published Last updated: 4.6.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