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 '@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>
<div class="form-item-column">
{% if field_message %}
{% include '@field-message' with {
"modifier": modifier,
"id": id ~ "-message"
} %}
{% endif %}
</div>
</div>
</div>
<div class="form-item ">
<label for="input-number">input-number
<span class="label-optional">
Optional
</span>
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="number" id="input-number" name="input-number" class="number" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
{
"label": "input-number",
"id": "input-number",
"label_optional": "Optional",
"field_description": null,
"field_message": null,
"input_component": "input",
"type": "number"
}
.form-item {
margin-bottom: 1.2rem;
> * {
max-width: 20.5rem;
}
@include desktop {
> * {
max-width: 41rem;
}
> .field-message,
> label {
max-width: 50%;
}
}
.field-message:not(.error):not(.success) {
margin-bottom: .4rem;
}
&:not(.stacked) {
.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()/2 .2rem;
padding: .7rem 1.2rem .7rem 3.9rem;
&::before {
top: .5rem;
left: 1.7rem;
}
.accolade {
right: auto;
bottom: 0;
left: 0;
width: 1rem;
height: 100%;
transform: rotate(0deg);
&::before,
&::after {
width: 1rem;
border: 0;
}
&::before {
top: 0;
bottom: 1.2rem;
height: 1.2rem;
border-radius: 0 0 border-radius("radius-4");
}
&::after {
top: 1.2rem;
right: 0;
bottom: -1px;
height: auto;
border-radius: 0 border-radius("radius-4") 0 0;
}
}
}
}
}
}
}
}
&.stacked {
> * {
max-width: none;
}
.form-columns {
flex-wrap: wrap;
margin-top: auto;
}
.form-columns .form-item-column {
width: 100%;
max-width: 40rem;
.field-message {
margin-top: .2rem;
margin-left: 0;
}
}
}
}