3 Forms

Bootstrap Buttons and Forms with some customisations.

3.1.1 Highlight button View in a new window

Default example
Hover
Focus
Markup
{% set url = url|default("#") %}
{% set label = label|default("Button") %}
<a class="nsw-button nsw-button--highlight {{ modifier_class }}" href="{{url}}" role="button">{{label}}</a>

3.1.2 Outline button View in a new window

Default example
Hover
Focus
Markup
{% set label = label|default("More details") %}
{% set url = url|default("#") %}
<a class="nsw-button nsw-button--outline {{ modifier_class }}" href="{{url}}" role="button">{{label}}</a>

3.1.3 Primary button View in a new window

Default example
Hover
Focus
Markup
{% set label = label|default("Find") %}
{% set url = url|default("#") %}
<a class="nsw-button nsw-button--primary {{ modifier_class }}" href="{{url}}" role="button">{{label}}</a>

3.1.4 Primary Large button CTA View in a new window

Default example
Hover
Focus
Markup
{% set label = label|default("Find") %}
{% set url = url|default("#") %}
<a class="nsw-button nsw-button--primary nsw-button--large-cta {{ modifier_class }}" href="{{url}}" role="button">{{label}}</a>
Example
error-message
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>
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>
Example
Markup
<label for="nsw-form-label">Label</label>
Example
error-message
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>