{% 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 %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
icon_size
|
Customize the size of the input icon used |
— |
medium
|
|
npm install @bolt/components-form
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.
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.
(all fields are required)
(all fields are required)
(all fields are required)
(Note: forms do not offically support dark themes yet. Use at your own risk.)