3 Forms
Bootstrap Buttons and Forms with some customisations.
3.2 Forms View in a new window
3.2.1 Checkbox View in a new window
Example
Markup
{% set checkboxData = checkboxData|default({
"name":"checkbox",
"id":"checkboxId",
"label":"Checkbox",
"errorText":"error-message"
}) %}
<fieldset class="nsw-forms">
<input class="nsw-form-checkbox__input" type="checkbox" name="{{checkboxData.name}}" id="{{checkboxData.id}}" aria-describedby="{{checkboxData.id}}-error-text">
<label class="nsw-form-checkbox__label" for="{{checkboxData.id}}">{{checkboxData.label}}</label>
{% if checkboxData.errorText %}
<span id="{{checkboxData.id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{checkboxData.errorText}}</span>
{% endif %}
</fieldset>
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>
3.2.3 Label View in a new window
Example
Markup
<label for="nsw-form-label">Label</label>
3.2.4 Radios View in a new window
Example
Markup
{% set radioData = radioData|default({
"name":"radio",
"id":"radioId",
"label":"radio",
"errorText":"error-message"
}) %}
<fieldset class="nsw-forms">
<legend></legend>
<input class="nsw-form-radio__input" type="radio" name="{{radioData.name}}" id="{{radioData.id}}" aria-describedby="{{radioData.id}}-error-text">
<label class="nsw-form-radio__label" for="{{radioData.id}}">{{radioData.label}}</label>
{% if radioData.errorText %}
<span id="{{radioData.id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{radioData.errorText}}</span>
{% endif %}
</fieldset>