Use the input component to let users enter text or a value that is not longer than a single line.
Do not use the input component to let users enter longer text that might have multiple lines. In this case, use textarea component instead.
To let users enter a date, use the input type date. This will trigger the built-in browser date picker functionality for a consistent user experience. It is also the best way to let the user enter a date on mobile and it is accessible (most custom date pickers aren’t).
For browsers that do not support the input type date, make sure there is a fallback, for instance, by adding a field message explaining the date format that should be used combined with pattern validation.
The input component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component examples and documentation.
{% set describedBy = null %}
{% if field_description %}
{% set describedBy = id ~ "-description" %}
{% endif %}
{% if field_message %}
{% set describedBy = id ~ "-message" %}
{% endif %}
<div class="form-item {{ modifier ? ' ' ~ modifier : '' }}{{ stacked ? ' stacked' : '' }}">
{% include '@form-label' with {
"label": label,
"for": id,
"label_optional": label_optional
} %}
{% include '@field-message' with {
"field_message": field_description,
"modifier": null,
"id": id ~ "-description"
} %}
<div class="form-columns">
<div class="form-item-column">
{% include '@'~input_component with {
"id": id,
"name": name|default(id),
"ariaDescribedBy": describedBy,
"type": type,
"invalid": modifier == 'error',
"modifier": modifier
}%}
</div>
{% apply spaceless %}
<div class="form-item-column">
{% if field_message %}
{% include '@field-message' with {
"modifier": modifier,
"id": id ~ "-message"
} %}
{% endif %}
</div>
{% endapply %}
</div>
</div>
<div class="form-item ">
<label for="input-email">input-email
<span class="label-optional">
Optional
</span>
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="email" id="input-email" name="input-email" class="email" />
</div>
<div class="form-item-column"></div>
</div>
</div>
{
"label": "input-email",
"id": "input-email",
"label_optional": "Optional",
"field_description": null,
"field_message": null,
"input_component": "input",
"type": "email"
}
.form-item {
margin-bottom: 30px;
> * {
max-width: 410px;
}
@include desktop {
> * {
max-width: 820px;
}
> .field-message,
> label {
max-width: 410px;
}
}
&.webform-document-file,
&.webform-image-file {
a,
.file-type {
display: inline-block;
margin-bottom: 10px;
font-size: .7rem;
}
}
.field-prefix,
.field-suffix {
display: block;
}
.field-message:not(.error):not(.success) {
margin-bottom: 20px;
}
&:not(.stacked) {
.form-label {
@include desktop {
width: 50%;
max-width: 410px;
}
}
.form-columns {
margin-bottom: 0;
@include desktop {
display: flex;
.form-item-column {
width: 50%;
&:last-child {
display: flex;
align-items: flex-start;
.field-message {
margin: 0 0 $gutter-width * .5 6px;
padding: 14px 24px 14px 78px;
&::before {
top: 10px;
left: 34px;
}
.accolade {
right: auto;
bottom: 0;
left: 0;
width: 20px;
height: 100%;
transform: rotate(0deg);
&::before,
&::after {
width: 20px;
border: 0;
}
&::before {
top: 0;
bottom: 24px;
height: 24px;
border-radius: 0 0 border-radius("radius-4");
}
&::after {
top: 24px;
right: 0;
bottom: -1px;
height: calc(100% - 20px);
border-radius: 0 border-radius("radius-4") 0 0;
}
}
}
}
&:empty {
display: none;
}
&:not(:empty) {
width: 100%;
}
}
}
}
}
&.stacked {
> * {
max-width: none;
}
.form-columns {
flex-wrap: wrap;
margin-top: auto;
}
.form-columns .form-item-column {
width: 100%;
max-width: 800px;
&:empty {
display: none;
}
.field-message {
width: 100%;
margin-top: 4px;
margin-left: 0;
}
}
}
}
.form-item-column {
.form-item {
.form-label {
width: 100%;
}
}
}