3.2.2 Controls View in a new window
Example
error-message for input
error-message for select
error-message for textarea
Markup
{% set inputData = inputData|default({
"name":"input",
"id":"inputId",
"label":"input",
"errorText":"error-message for input"
}) %}
{% set textareaData = textareaData|default({
"name":"textarea",
"id":"textarea",
"label":"textarea",
"errorText":"error-message for textarea"
}) %}
{% set selectData = selectData|default({
"name":"select",
"id":"selectId",
"label":"select",
"errorText":"error-message for select"
}) %}
<div class="nsw-forms">
<div class="nsw-form-group">
<label for="{{id}}" class="nsw-form-label">{{inputData.label}}</label>
{% if inputData.helperText %}
<span id="{{inputData.id}}-helper-text" class="nsw-form-helper">{{inputData.helperText}}</span>
{% endif %}
<input id="{{inputData.id}}" name="text" class="nsw-form-input" aria-describedby="{{inputData.id}}-helper-text {{inputData.id}}-error-text">
{% if inputData.errorText %}
<span id="{{inputData.id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{inputData.errorText}}</span>
{% endif %}
</div>
</div>
<div class="nsw-forms">
<div class="nsw-form-group">
<label for="{{selectData.id}}" class="nsw-form-label">{{selectData.label}}</label>
{% if selectData.helperText %}
<span id="{{selectData.id}}-helper-text" class="nsw-form-helper">{{selectData.helperText}}</span>
{% endif %}
<select id="{{selectData.id}}" class="nsw-form-select" aria-describedby="{{selectData.id}}-helper-text {{selectData.id}}-error-text">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
{% if selectData.errorText %}
<span id="{{selectData.id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{selectData.errorText}}</span>
{% endif %}
</div>
</div>
<div class="nsw-forms">
<div class="nsw-form-group">
<label for="{{textareaData.id}}" class="nsw-form-label">{{textareaData.label}}</label>
{% if textareaData.helperText %}
<span id="{{textareaData.id}}-helper-text" class="nsw-form-helper">{{textareaData.helperText}}</span>
{% endif %}
<textarea class="nsw-form-input" name="textareaData" id="{{textareaData.id}}" aria-describedby="{{textareaData.id}}-helper-text {{textareaData.id}}-error-text"></textarea>
{% if textareaData.errorText %}
<span id="{{textareaData.id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{textareaData.errorText}}</span>
{% endif %}
</div>
</div>