Design System

Alert Blockquote Breadcrumbs Button Colors Comment Comments Filter Form Icons Input Modal Nav Navbar Pagination Progress Bar Search Form Section Sharing Sidebar Single Content Single Footer Single Header Single Meta Site Footer Site Header Sub Section Table Teaser Typography

Input

Variables

checked: Boolean. If the input is checked.
classes: String. Classes for the input.
disabled: Boolean. If the input is disabled.
inline: Boolean. If the checkbox is inline with other checkboxes.
label: String. Label for the input.
required: Boolean. If the input is required.
value: String. The value of the input.

Variations

Checkbox is build in the way that it comes in array of elements. You can add specific classes to all checkboxes wrapper, and then the array of checkboxes parameters.

Checkbox not selected Checkbox is selected Checkbox disabled

label: "Checkbox not selected",


                  {% include "input/checkbox.twig" with { label: "Checkbox not selected", value: "1",  } %}

label: "Checkbox is selected",


                  {% include "input/checkbox.twig" with { label: "Checkbox is selected", checked: "true", value: "1",  } %}

label: "Checkbox disabled",


                  {% include "input/checkbox.twig" with { disabled: "true", label: "Checkbox disabled", value: "1",  } %}

`input.twig`

Variables

classes: String. Classes for the input.
disabled: Boolean. A boolean to indicate if the element should be visually and functionally disabled.
help_text: String. Help text for the input.
help_text_classes: String. Classes for the help text.
id: String. Id attribute for the input.
label: String. Label for the input.
label_classes: String. Label for the element.
name: String. Name attribute for the input
placeholder: String. Placeholder for the input.
readonly: Boolean. If the input is read-only.
required: Boolean. If the input is required.
type: String. The type for this link (button, reset or submit).
value: Mixed. The value of the input.

Variations

Input default, active and with text.


                {% include "input/input.twig" with { label: "Input default, active and with text.",  } %}

Disabled input


                {% include "input/input.twig" with { disabled: "true", label: "Disabled input", placeholder: "Hello",  } %}


                {% include "input/input.twig" with { classes: "required email newsletter__input", id: "mce-EMAIL", name: "EMAIL", placeholder: "Enter you email address", type: "email",  } %}


                {% include "input/input.twig" with { classes: "button btn-transparent--md-narrow", id: "mc-embedded-subscribe", name: "subscribe", type: "submit", value: "Subscribe",  } %}