Form

A collection of fieldset and inputs.

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