Forms

Ready

Forms are used for used for collecting user input and use a variety of form elements.

Text Field#

To collect information that will only take up one line, such as a name, phone number or city

Primary#

Form Input LabelHelper Text

<div class="bux-text-field">
  <label class="bux-text-field__label" for="bux-text-field__text-input-1661600880"
    >Form Input Label</label
  >
  <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-1661600880"
    >Helper Text</span
  >
  <input
    id="bux-text-field__text-input-1661600880"
    class="bux-text-field__input"
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-field__helper-text-1661600880"
  />
</div>

{% if "password" in modifier %}
    {% set text_field_id = "password-input-" %}
{% else %}
    {% set text_field_id = "text-input-" %}
{% endif %}

{% set random_seed = random() %}
{% set text_field_id = text_field_id ~ random_seed %}

<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__{{ text_field_id }}">{{ input_label}}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <input 
        id="bux-text-field__{{ text_field_id }}" 
        class="bux-text-field__input{% if modifier %} bux-text-field__input--{{ modifier }}{% endif %}" 
        {% if required %} required {% endif %} 
        {% if "disabled" in modifier %} disabled="disabled" {% endif %} 
        {% if "error" in modifier %} aria-invalid="true" {% endif %} 
        {% if "password" in modifier %} type="password" {% endif %}
        placeholder="{{ placeholder_text }}"
        aria-describedby="{% if "error" in modifier %}bux-text-field__error-message-{{ random_seed }} {% endif %}bux-text-field__helper-text-{{ random_seed }}" 
    />
    {% if "password" in modifier %} 
        <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-{{ random_seed }}" title="Show Password"></button> 
    {% endif %}
    {% if "error" in modifier %}
        <span class="bux-text-field__error-message" id="bux-text-field__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</div>

Required#

Form Input Label (required)Helper Text

<div class="bux-text-field">
  <label class="bux-text-field__label" for="bux-text-field__text-input-1661600880"
    >Form Input Label</label
  >
  <label class="bux-text-field__label" for="bux-text-field__text-input-966244044">Form Input Label <span class="bux-text-field__required">(required)</span></label>
  <input
    id="bux-text-field__text-input-1661600880"
    class="bux-text-field__input"
    required
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-field__helper-text-1661600880"
  />
</div>

{% if "password" in modifier %}
    {% set text_field_id = "password-input-" %}
{% else %}
    {% set text_field_id = "text-input-" %}
{% endif %}

{% set random_seed = random() %}
{% set text_field_id = text_field_id ~ random_seed %}

<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__{{ text_field_id }}">{{ input_label}}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <input 
        id="bux-text-field__{{ text_field_id }}" 
        class="bux-text-field__input{% if modifier %} bux-text-field__input--{{ modifier }}{% endif %}" 
        {% if required %} required {% endif %} 
        {% if "disabled" in modifier %} disabled="disabled" {% endif %} 
        {% if "error" in modifier %} aria-invalid="true" {% endif %} 
        {% if "password" in modifier %} type="password" {% endif %}
        placeholder="{{ placeholder_text }}"
        aria-describedby="{% if "error" in modifier %}bux-text-field__error-message-{{ random_seed }} {% endif %}bux-text-field__helper-text-{{ random_seed }}" 
    />
    {% if "password" in modifier %} 
        <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-{{ random_seed }}" title="Show Password"></button> 
    {% endif %}
    {% if "error" in modifier %}
        <span class="bux-text-field__error-message" id="bux-text-field__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</div>

Disabled#

Form Input LabelHelper Text

<div class="bux-text-field">
  <label class="bux-text-field__label" for="bux-text-field__text-input-940419803"
    >Form Input Label</label
  >
  <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-940419803"
    >Helper Text</span
  >
  <input
    id="bux-text-field__text-input-940419803"
    class="bux-text-field__input bux-text-field__input--disabled"
    disabled="disabled"
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-field__helper-text-940419803"
  />
</div>

{% if "password" in modifier %}
    {% set text_field_id = "password-input-" %}
{% else %}
    {% set text_field_id = "text-input-" %}
{% endif %}

{% set random_seed = random() %}
{% set text_field_id = text_field_id ~ random_seed %}

<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__{{ text_field_id }}">{{ input_label}}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <input 
        id="bux-text-field__{{ text_field_id }}" 
        class="bux-text-field__input{% if modifier %} bux-text-field__input--{{ modifier }}{% endif %}" 
        {% if required %} required {% endif %} 
        {% if "disabled" in modifier %} disabled="disabled" {% endif %} 
        {% if "error" in modifier %} aria-invalid="true" {% endif %} 
        {% if "password" in modifier %} type="password" {% endif %}
        placeholder="{{ placeholder_text }}"
        aria-describedby="{% if "error" in modifier %}bux-text-field__error-message-{{ random_seed }} {% endif %}bux-text-field__helper-text-{{ random_seed }}" 
    />
    {% if "password" in modifier %} 
        <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-{{ random_seed }}" title="Show Password"></button> 
    {% endif %}
    {% if "error" in modifier %}
        <span class="bux-text-field__error-message" id="bux-text-field__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</div>

Error#

Form Input LabelHelper TextError Helper Text

<div class="bux-text-field">
  <label class="bux-text-field__label" for="bux-text-field__text-input-1354164264"
    >Form Input Label</label
  >
  <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-1354164264"
    >Helper Text</span
  >
  <input
    id="bux-text-field__text-input-1354164264"
    class="bux-text-field__input bux-text-field__input--error"
    aria-invalid="true"
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-field__error-message-1354164264 bux-text-field__helper-text-1354164264"
  />
  <span class="bux-text-field__error-message" id="bux-text-field__error-message-1354164264"
    >Error Helper Text</span
  >
</div>

{% if "password" in modifier %}
    {% set text_field_id = "password-input-" %}
{% else %}
    {% set text_field_id = "text-input-" %}
{% endif %}

{% set random_seed = random() %}
{% set text_field_id = text_field_id ~ random_seed %}

<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__{{ text_field_id }}">{{ input_label}}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <input 
        id="bux-text-field__{{ text_field_id }}" 
        class="bux-text-field__input{% if modifier %} bux-text-field__input--{{ modifier }}{% endif %}" 
        {% if required %} required {% endif %} 
        {% if "disabled" in modifier %} disabled="disabled" {% endif %} 
        {% if "error" in modifier %} aria-invalid="true" {% endif %} 
        {% if "password" in modifier %} type="password" {% endif %}
        placeholder="{{ placeholder_text }}"
        aria-describedby="{% if "error" in modifier %}bux-text-field__error-message-{{ random_seed }} {% endif %}bux-text-field__helper-text-{{ random_seed }}" 
    />
    {% if "password" in modifier %} 
        <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-{{ random_seed }}" title="Show Password"></button> 
    {% endif %}
    {% if "error" in modifier %}
        <span class="bux-text-field__error-message" id="bux-text-field__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</div>

Password Field#

Form Input LabelHelper Text

<div class="bux-text-field">
  <label class="bux-text-field__label" for="bux-text-field__password-input-854837626"
    >Form Input Label</label
  >
  <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-854837626"
    >Helper Text</span
  >
  <input
    id="bux-text-field__password-input-854837626"
    class="bux-text-field__input bux-text-field__input--password"
    type="password"
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-field__helper-text-854837626"
  />

  <button
    class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button"
    id="bux-text-field__password-toggle-854837626"
    title="Show Password"
  ></button>
</div>

{% if "password" in modifier %}
    {% set text_field_id = "password-input-" %}
{% else %}
    {% set text_field_id = "text-input-" %}
{% endif %}

{% set random_seed = random() %}
{% set text_field_id = text_field_id ~ random_seed %}

<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__{{ text_field_id }}">{{ input_label}}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <input 
        id="bux-text-field__{{ text_field_id }}" 
        class="bux-text-field__input{% if modifier %} bux-text-field__input--{{ modifier }}{% endif %}" 
        {% if required %} required {% endif %} 
        {% if "disabled" in modifier %} disabled="disabled" {% endif %} 
        {% if "error" in modifier %} aria-invalid="true" {% endif %} 
        {% if "password" in modifier %} type="password" {% endif %}
        placeholder="{{ placeholder_text }}"
        aria-describedby="{% if "error" in modifier %}bux-text-field__error-message-{{ random_seed }} {% endif %}bux-text-field__helper-text-{{ random_seed }}" 
    />
    {% if "password" in modifier %} 
        <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-{{ random_seed }}" title="Show Password"></button> 
    {% endif %}
    {% if "error" in modifier %}
        <span class="bux-text-field__error-message" id="bux-text-field__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</div>

Text Area#

To collect information that would take up multiple lines, such as a description or short essay

Primary#

Form Input LabelHelper Text

<div class="bux-text-area">
  <label class="bux-text-area__label" for="bux-text-area__text-area-530855203">Form Input Label</label>
  <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-530855203">Helper Text</span>
  <textarea id="bux-text-area__text-area-530855203" class="bux-text-area__text-area" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-530855203"></textarea>
</div>

{% set random_seed = random() %}
{% set text_area_id =  "text-area-" ~ random_seed %}

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__{{ text_area_id }}">{{ input_label }}{% if required %} <span class="bux-text-area__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <textarea id="bux-text-area__{{ text_area_id }}" class="bux-text-area__text-area{% if modifier %} bux-text-area__text-area--{{ modifier }}{% endif %}" 
    {% if required %} required {% endif %} 
    {% if "disabled" in modifier %} disabled="disabled" {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}
    placeholder="{{ placeholder_text }}" aria-describedby="{% if "error" in modifier %} bux-text-area__error-message-{{ random_seed }} {% endif %}bux-text-area__helper-text-{{ random_seed }}"></textarea>
    {% if "error" in modifier %}
        <span class="bux-text-area__error-message" id="bux-text-area__error-message-{{ random_seed }}">{{ error_helper_text}}</span>
    {% endif %}
</div>

Required#

Form Input Label (required)Helper Text

<div class="bux-text-area">
  <label class="bux-text-area__label" for="bux-text-area__text-area-612145826">Form Input Label <span class="bux-text-area__required">(required)</span></label>
  <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-612145826">Helper Text</span>
  <textarea id="bux-text-area__text-area-612145826" class="bux-text-area__text-area" required placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-612145826"></textarea>
</div>

{% set random_seed = random() %}
{% set text_area_id =  "text-area-" ~ random_seed %}

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__{{ text_area_id }}">{{ input_label }}{% if required %} <span class="bux-text-area__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <textarea id="bux-text-area__{{ text_area_id }}" class="bux-text-area__text-area{% if modifier %} bux-text-area__text-area--{{ modifier }}{% endif %}" 
    {% if required %} required {% endif %} 
    {% if "disabled" in modifier %} disabled="disabled" {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}
    placeholder="{{ placeholder_text }}" aria-describedby="{% if "error" in modifier %} bux-text-area__error-message-{{ random_seed }} {% endif %}bux-text-area__helper-text-{{ random_seed }}"></textarea>
    {% if "error" in modifier %}
        <span class="bux-text-area__error-message" id="bux-text-area__error-message-{{ random_seed }}">{{ error_helper_text}}</span>
    {% endif %}
</div>

Disabled#

Form Input LabelHelper Text

<div class="bux-text-area">
  <label class="bux-text-area__label" for="bux-text-area__text-area-1714790391">Form Input Label</label>
  <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1714790391">Helper Text</span>
  <textarea id="bux-text-area__text-area-1714790391" class="bux-text-area__text-area bux-text-area__text-area--disabled" disabled="disabled" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-1714790391"></textarea>
</div>

{% set random_seed = random() %}
{% set text_area_id =  "text-area-" ~ random_seed %}

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__{{ text_area_id }}">{{ input_label }}{% if required %} <span class="bux-text-area__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <textarea id="bux-text-area__{{ text_area_id }}" class="bux-text-area__text-area{% if modifier %} bux-text-area__text-area--{{ modifier }}{% endif %}" 
    {% if required %} required {% endif %} 
    {% if "disabled" in modifier %} disabled="disabled" {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}
    placeholder="{{ placeholder_text }}" aria-describedby="{% if "error" in modifier %} bux-text-area__error-message-{{ random_seed }} {% endif %}bux-text-area__helper-text-{{ random_seed }}"></textarea>
    {% if "error" in modifier %}
        <span class="bux-text-area__error-message" id="bux-text-area__error-message-{{ random_seed }}">{{ error_helper_text}}</span>
    {% endif %}
</div>

Error#

Form Input LabelHelper TextError Helper Text

<div class="bux-text-area">
  <label class="bux-text-area__label" for="bux-text-area__text-area-1616736992">Form Input Label</label>
  <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1616736992">Helper Text</span>
  <textarea id="bux-text-area__text-area-1616736992" class="bux-text-area__text-area bux-text-area__text-area--error" aria-invalid="true" placeholder="Placeholder Text (Optional)" aria-describedby=" bux-text-area__error-message-1616736992 bux-text-area__helper-text-1616736992"></textarea>
  <span class="bux-text-area__error-message" id="bux-text-area__error-message-1616736992">Error Helper Text</span>
</div>

{% set random_seed = random() %}
{% set text_area_id =  "text-area-" ~ random_seed %}

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__{{ text_area_id }}">{{ input_label }}{% if required %} <span class="bux-text-area__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <textarea id="bux-text-area__{{ text_area_id }}" class="bux-text-area__text-area{% if modifier %} bux-text-area__text-area--{{ modifier }}{% endif %}" 
    {% if required %} required {% endif %} 
    {% if "disabled" in modifier %} disabled="disabled" {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}
    placeholder="{{ placeholder_text }}" aria-describedby="{% if "error" in modifier %} bux-text-area__error-message-{{ random_seed }} {% endif %}bux-text-area__helper-text-{{ random_seed }}"></textarea>
    {% if "error" in modifier %}
        <span class="bux-text-area__error-message" id="bux-text-area__error-message-{{ random_seed }}">{{ error_helper_text}}</span>
    {% endif %}
</div>

Checkbox#

To select zero, one or multiple options from a set

Primary#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

<div class="bux-checkbox">
  <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1160292839" aria-describedby="bux-checkbox__helper-text-1160292839">
      <legend class="bux-checkbox__legend">Form Input Label</legend>
      <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1160292839">Helper Text</span>
      <div class="bux-checkbox__input-spacer">
          <div class="bux-checkbox__option">
              <input type="checkbox" id="bux-checkbox__option-1817259422" value="item_1">
              <label for="bux-checkbox__option-1817259422">Item 1</label>
          </div>
          <div class="bux-checkbox__option">
              <input type="checkbox" id="bux-checkbox__option-1696247192" value="item_2">
              <label for="bux-checkbox__option-1696247192">Item 2</label>
          </div>
          <div class="bux-checkbox__option">
              <input type="checkbox" id="bux-checkbox__option-2104920296" value="item_3">
              <label for="bux-checkbox__option-2104920296">Item 3</label>
          </div>
      </div>
  </fieldset>
</div>

{% set random_seed = random() %}
{% set checkbox_id = "checkbox-" ~ random_seed %}

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__{{ checkbox_id }}" aria-describedby="{% if "error" in modifier %}bux-checkbox__error-message-{{ random_seed }} {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-checkbox__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-checkbox__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set checkbox_option_id = "bux-checkbox__option-" ~ random_seed_option %}
            <div class="bux-checkbox__option{% if modifier %} bux-checkbox__option--{{ modifier }}{% endif %}">
                <input type="checkbox" id="{{ checkbox_option_id }}" {% if item.value %} value="{{ item.value }}" {% endif %} {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ checkbox_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Required#

Form Input Label (required)Helper Text

Item 1

Item 2

Item 3

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-829506422" aria-describedby="bux-checkbox__helper-text-829506422" required>
        <legend class="bux-checkbox__legend">Form Input Label <span class="bux-text-field__required">(required)</span></legend>
        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-829506422">Helper Text</span>
        <div class="bux-checkbox__input-spacer">
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-1619234303" value="item_1">
                <label for="bux-checkbox__option-1619234303">Item 1</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-1100509216" value="item_2">
                <label for="bux-checkbox__option-1100509216">Item 2</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-363685225" value="item_3">
                <label for="bux-checkbox__option-363685225">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>

{% set random_seed = random() %}
{% set checkbox_id = "checkbox-" ~ random_seed %}

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__{{ checkbox_id }}" aria-describedby="{% if "error" in modifier %}bux-checkbox__error-message-{{ random_seed }} {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-checkbox__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-checkbox__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set checkbox_option_id = "bux-checkbox__option-" ~ random_seed_option %}
            <div class="bux-checkbox__option{% if modifier %} bux-checkbox__option--{{ modifier }}{% endif %}">
                <input type="checkbox" id="{{ checkbox_option_id }}" {% if item.value %} value="{{ item.value }}" {% endif %} {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ checkbox_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Disabled#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

<div class="bux-checkbox">
  <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1229157730" aria-describedby="bux-checkbox__helper-text-1229157730">
      <legend class="bux-checkbox__legend">Form Input Label</legend>
      <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1229157730">Helper Text</span>
      <div class="bux-checkbox__input-spacer">
          <div class="bux-checkbox__option bux-checkbox__option--disabled">
              <input type="checkbox" id="bux-checkbox__option-1474158504" value="item_1" disabled>
              <label for="bux-checkbox__option-1474158504">Item 1</label>
          </div>
          <div class="bux-checkbox__option bux-checkbox__option--disabled">
              <input type="checkbox" id="bux-checkbox__option-905990481" value="item_2" disabled>
              <label for="bux-checkbox__option-905990481">Item 2</label>
          </div>
          <div class="bux-checkbox__option bux-checkbox__option--disabled">
              <input type="checkbox" id="bux-checkbox__option-576358791" value="item_3" disabled>
              <label for="bux-checkbox__option-576358791">Item 3</label>
          </div>
      </div>
  </fieldset>
</div>

{% set random_seed = random() %}
{% set checkbox_id = "checkbox-" ~ random_seed %}

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__{{ checkbox_id }}" aria-describedby="{% if "error" in modifier %}bux-checkbox__error-message-{{ random_seed }} {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-checkbox__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-checkbox__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set checkbox_option_id = "bux-checkbox__option-" ~ random_seed_option %}
            <div class="bux-checkbox__option{% if modifier %} bux-checkbox__option--{{ modifier }}{% endif %}">
                <input type="checkbox" id="{{ checkbox_option_id }}" {% if item.value %} value="{{ item.value }}" {% endif %} {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ checkbox_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Error#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

Error Helper Text

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1717247071" aria-describedby="bux-checkbox__error-message-1717247071 bux-checkbox__helper-text-1717247071" aria-invalid="true">
        <legend class="bux-checkbox__legend">Form Input Label</legend>
        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1717247071">Helper Text</span>
        <div class="bux-checkbox__input-spacer">
            <div class="bux-checkbox__option bux-checkbox__option--error">
                <input type="checkbox" id="bux-checkbox__option-232365036" value="item_1">
                <label for="bux-checkbox__option-232365036">Item 1</label>
            </div>
            <div class="bux-checkbox__option bux-checkbox__option--error">
                <input type="checkbox" id="bux-checkbox__option-229913548" value="item_2">
                <label for="bux-checkbox__option-229913548">Item 2</label>
            </div>
            <div class="bux-checkbox__option bux-checkbox__option--error">
                <input type="checkbox" id="bux-checkbox__option-1796209878" value="item_3">
                <label for="bux-checkbox__option-1796209878">Item 3</label>
            </div>
        </div>
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-1717247071">Error Helper Text</span>
    </fieldset>
</div>

{% set random_seed = random() %}
{% set checkbox_id = "checkbox-" ~ random_seed %}

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__{{ checkbox_id }}" aria-describedby="{% if "error" in modifier %}bux-checkbox__error-message-{{ random_seed }} {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-checkbox__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-checkbox__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set checkbox_option_id = "bux-checkbox__option-" ~ random_seed_option %}
            <div class="bux-checkbox__option{% if modifier %} bux-checkbox__option--{{ modifier }}{% endif %}">
                <input type="checkbox" id="{{ checkbox_option_id }}" {% if item.value %} value="{{ item.value }}" {% endif %} {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ checkbox_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Radio Button#

To select exactly one option in a set

Primary#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

<div class="bux-radio">
  <fieldset class="bux-radio__fieldset" id="bux-radio__radio-911931575" role="radiogroup" aria-describedby="bux-checkbox__helper-text-911931575">
      <legend class="bux-radio__legend">Form Input Label</legend>
      <span class="bux-radio__helper-text" id="bux-radio__helper-text-911931575">Helper Text</span>
      <div class="bux-radio__input-spacer">
          <div class="bux-radio__option">
              <input type="radio" id="bux-radio__option-1710664996" name="radio-911931575">
              <label for="bux-radio__option-1710664996">Item 1</label>
          </div>
          <div class="bux-radio__option">
              <input type="radio" id="bux-radio__option-572959459" name="radio-911931575">
              <label for="bux-radio__option-572959459">Item 2</label>
          </div>
          <div class="bux-radio__option">
              <input type="radio" id="bux-radio__option-386626209" name="radio-911931575">
              <label for="bux-radio__option-386626209">Item 3</label>
          </div>
      </div>
  </fieldset>
</div>

{% set random_seed = random() %}
{% set radio_id = "radio-" ~ random_seed %}


<div class="bux-radio">
    <fieldset class="bux-radio__fieldset" id="bux-radio__{{ radio_id }}" role="radiogroup" aria-describedby="{% if "error" in modifier %} bux-radio__error-message {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-radio__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-radio__helper-text" id="bux-radio__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-radio__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set radio_option_id = "bux-radio__option-" ~ random_seed_option %}
            <div class="bux-radio__option{% if modifier %} bux-radio__option--{{ modifier }}{% endif %}">
                <input type="radio" id="{{ radio_option_id }}" name="{{ radio_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ radio_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-radio__error-message" id="bux-radio__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Required#

Form Input Label (required)Helper Text

Item 1

Item 2

Item 3

<div class="bux-radio">
    <fieldset class="bux-radio__fieldset" id="bux-radio__radio-1003621210" role="radiogroup" aria-describedby="bux-checkbox__helper-text-1003621210" required>
        <legend class="bux-radio__legend">Form Input Label <span class="bux-text-field__required">(required)</span></legend>
        <span class="bux-radio__helper-text" id="bux-radio__helper-text-1003621210">Helper Text</span>
        <div class="bux-radio__input-spacer">
            <div class="bux-radio__option">
                <input type="radio" id="bux-radio__option-1405315600" name="radio-1003621210">
                <label for="bux-radio__option-1405315600">Item 1</label>
            </div>
            <div class="bux-radio__option">
                <input type="radio" id="bux-radio__option-1409502328" name="radio-1003621210">
                <label for="bux-radio__option-1409502328">Item 2</label>
            </div>
            <div class="bux-radio__option">
                <input type="radio" id="bux-radio__option-496651316" name="radio-1003621210">
                <label for="bux-radio__option-496651316">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>

{% set random_seed = random() %}
{% set radio_id = "radio-" ~ random_seed %}


<div class="bux-radio">
    <fieldset class="bux-radio__fieldset" id="bux-radio__{{ radio_id }}" role="radiogroup" aria-describedby="{% if "error" in modifier %} bux-radio__error-message {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-radio__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-radio__helper-text" id="bux-radio__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-radio__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set radio_option_id = "bux-radio__option-" ~ random_seed_option %}
            <div class="bux-radio__option{% if modifier %} bux-radio__option--{{ modifier }}{% endif %}">
                <input type="radio" id="{{ radio_option_id }}" name="{{ radio_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ radio_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-radio__error-message" id="bux-radio__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Disabled#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

<div class="bux-radio">
  <fieldset class="bux-radio__fieldset" id="bux-radio__radio-806860117" role="radiogroup" aria-describedby="bux-checkbox__helper-text-806860117">
      <legend class="bux-radio__legend">Form Input Label</legend>
      <span class="bux-radio__helper-text" id="bux-radio__helper-text-806860117">Helper Text</span>
      <div class="bux-radio__input-spacer">
          <div class="bux-radio__option bux-radio__option--disabled">
              <input type="radio" id="bux-radio__option-1903469547" name="radio-806860117" disabled>
              <label for="bux-radio__option-1903469547">Item 1</label>
          </div>
          <div class="bux-radio__option bux-radio__option--disabled">
              <input type="radio" id="bux-radio__option-1464833836" name="radio-806860117" disabled>
              <label for="bux-radio__option-1464833836">Item 2</label>
          </div>
          <div class="bux-radio__option bux-radio__option--disabled">
              <input type="radio" id="bux-radio__option-1947330980" name="radio-806860117" disabled>
              <label for="bux-radio__option-1947330980">Item 3</label>
          </div>
      </div>
  </fieldset>
</div>

{% set random_seed = random() %}
{% set radio_id = "radio-" ~ random_seed %}


<div class="bux-radio">
    <fieldset class="bux-radio__fieldset" id="bux-radio__{{ radio_id }}" role="radiogroup" aria-describedby="{% if "error" in modifier %} bux-radio__error-message {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-radio__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-radio__helper-text" id="bux-radio__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-radio__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set radio_option_id = "bux-radio__option-" ~ random_seed_option %}
            <div class="bux-radio__option{% if modifier %} bux-radio__option--{{ modifier }}{% endif %}">
                <input type="radio" id="{{ radio_option_id }}" name="{{ radio_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ radio_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-radio__error-message" id="bux-radio__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Error#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

Error Helper Text

<div class="bux-radio">
    <fieldset class="bux-radio__fieldset" id="bux-radio__radio-1113850834" role="radiogroup" aria-describedby=" bux-radio__error-message bux-checkbox__helper-text-1113850834" aria-invalid="true">
        <legend class="bux-radio__legend">Form Input Label</legend>
        <span class="bux-radio__helper-text" id="bux-radio__helper-text-1113850834">Helper Text</span>
        <div class="bux-radio__input-spacer">
            <div class="bux-radio__option bux-radio__option--error">
                <input type="radio" id="bux-radio__option-1668373591" name="radio-1113850834">
                <label for="bux-radio__option-1668373591">Item 1</label>
            </div>
            <div class="bux-radio__option bux-radio__option--error">
                <input type="radio" id="bux-radio__option-91419208" name="radio-1113850834">
                <label for="bux-radio__option-91419208">Item 2</label>
            </div>
            <div class="bux-radio__option bux-radio__option--error">
                <input type="radio" id="bux-radio__option-1803916059" name="radio-1113850834">
                <label for="bux-radio__option-1803916059">Item 3</label>
            </div>
        </div>
        <span class="bux-radio__error-message" id="bux-radio__error-message-1113850834">Error Helper Text</span>
    </fieldset>
</div>

{% set random_seed = random() %}
{% set radio_id = "radio-" ~ random_seed %}


<div class="bux-radio">
    <fieldset class="bux-radio__fieldset" id="bux-radio__{{ radio_id }}" role="radiogroup" aria-describedby="{% if "error" in modifier %} bux-radio__error-message {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-radio__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-radio__helper-text" id="bux-radio__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-radio__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set radio_option_id = "bux-radio__option-" ~ random_seed_option %}
            <div class="bux-radio__option{% if modifier %} bux-radio__option--{{ modifier }}{% endif %}">
                <input type="radio" id="{{ radio_option_id }}" name="{{ radio_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ radio_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-radio__error-message" id="bux-radio__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>

Switch#

To turn a single setting “on” or “off” immediately

Primary#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__switch-1235022805" aria-describedby="bux-switch__helper-text-1235022805">
      <legend class="bux-switch__legend">Form Input Label</legend>
      <span class="bux-switch__helper-text" id="bux-switch__helper-text-1235022805">Helper Text</span>
      <div class="bux-switch__input-spacer">
          <div class="bux-switch__option">
              <input type="checkbox" id="bux-switch__option-916947222">
              <label for="bux-switch__option-916947222">Item 1</label>
          </div>
          <div class="bux-switch__option">
              <input type="checkbox" id="bux-switch__option-305377498">
              <label for="bux-switch__option-305377498">Item 2</label>
          </div>
          <div class="bux-switch__option">
              <input type="checkbox" id="bux-switch__option-775245077">
              <label for="bux-switch__option-775245077">Item 3</label>
          </div>
      </div>
  </fieldset>
</div>

{% set random_seed = random() %}
{% set switch_id = "switch-" ~ random_seed %}

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__{{ switch_id }}" aria-describedby="{% if "error" in modifier %} bux-switch__error-message {% endif %}bux-switch__helper-text-{{ random_seed }}"
  {% if required %} required {% endif %}
  {% if "error" in modifier %} aria-invalid="true" {% endif %}>
  <legend class="bux-switch__legend">{{ legend }}{% if required %} <span class="bux-switch__required">{{required}}</span>{% endif %}</legend>
  <span class="bux-switch__helper-text" id="bux-switch__helper-text-{{ random_seed }}">{{ helper_text }}</span>
  <div class="bux-switch__input-spacer">
    {% for item in items %}
      {% set random_seed_option = random() %}
      {% set switch_option_id = "bux-switch__option-" ~ random_seed_option %}
      <div class="bux-switch__option{% if modifier %} bux-switch__option--{{ modifier }}{% endif %}">
        <input type="checkbox" id="{{ switch_option_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
        <label for="{{ switch_option_id }}">{{ item.text }}</label>
      </div>
    {% endfor %}
  </div>
  {% if "error" in modifier %}
    <span class="bux-switch__error-message" id="bux-switch__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
  {% endif %}
</fieldset>
</div>

Required#

Form Input Label (required)Helper Text

Item 1

Item 2

Item 3

<div class="bux-switch">
    <fieldset class="bux-switch__fieldset" id="bux-switch__switch-988003240" aria-describedby="bux-switch__helper-text-988003240" required>
        <legend class="bux-switch__legend">Form Input Label <span class="bux-switch__required">(required)</span></legend>
        <span class="bux-switch__helper-text" id="bux-switch__helper-text-988003240">Helper Text</span>
        <div class="bux-switch__input-spacer">
            <div class="bux-switch__option">
                <input type="checkbox" id="bux-switch__option-1882453826">
                <label for="bux-switch__option-1882453826">Item 1</label>
            </div>
            <div class="bux-switch__option">
                <input type="checkbox" id="bux-switch__option-1285536806">
                <label for="bux-switch__option-1285536806">Item 2</label>
            </div>
            <div class="bux-switch__option">
                <input type="checkbox" id="bux-switch__option-1635242549">
                <label for="bux-switch__option-1635242549">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>

{% set random_seed = random() %}
{% set switch_id = "switch-" ~ random_seed %}

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__{{ switch_id }}" aria-describedby="{% if "error" in modifier %} bux-switch__error-message {% endif %}bux-switch__helper-text-{{ random_seed }}"
  {% if required %} required {% endif %}
  {% if "error" in modifier %} aria-invalid="true" {% endif %}>
  <legend class="bux-switch__legend">{{ legend }}{% if required %} <span class="bux-switch__required">{{required}}</span>{% endif %}</legend>
  <span class="bux-switch__helper-text" id="bux-switch__helper-text-{{ random_seed }}">{{ helper_text }}</span>
  <div class="bux-switch__input-spacer">
    {% for item in items %}
      {% set random_seed_option = random() %}
      {% set switch_option_id = "bux-switch__option-" ~ random_seed_option %}
      <div class="bux-switch__option{% if modifier %} bux-switch__option--{{ modifier }}{% endif %}">
        <input type="checkbox" id="{{ switch_option_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
        <label for="{{ switch_option_id }}">{{ item.text }}</label>
      </div>
    {% endfor %}
  </div>
  {% if "error" in modifier %}
    <span class="bux-switch__error-message" id="bux-switch__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
  {% endif %}
</fieldset>
</div>

Disabled#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__switch-46868427" aria-describedby="bux-switch__helper-text-46868427">
      <legend class="bux-switch__legend">Form Input Label</legend>
      <span class="bux-switch__helper-text" id="bux-switch__helper-text-46868427">Helper Text</span>
      <div class="bux-switch__input-spacer">
          <div class="bux-switch__option bux-switch__option--disabled">
              <input type="checkbox" id="bux-switch__option-1738148062" disabled>
              <label for="bux-switch__option-1738148062">Item 1</label>
          </div>
          <div class="bux-switch__option bux-switch__option--disabled">
              <input type="checkbox" id="bux-switch__option-647579527" disabled>
              <label for="bux-switch__option-647579527">Item 2</label>
          </div>
          <div class="bux-switch__option bux-switch__option--disabled">
              <input type="checkbox" id="bux-switch__option-2019011698" disabled>
              <label for="bux-switch__option-2019011698">Item 3</label>
          </div>
      </div>
  </fieldset>
</div>

{% set random_seed = random() %}
{% set switch_id = "switch-" ~ random_seed %}

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__{{ switch_id }}" aria-describedby="{% if "error" in modifier %} bux-switch__error-message {% endif %}bux-switch__helper-text-{{ random_seed }}"
  {% if required %} required {% endif %}
  {% if "error" in modifier %} aria-invalid="true" {% endif %}>
  <legend class="bux-switch__legend">{{ legend }}{% if required %} <span class="bux-switch__required">{{required}}</span>{% endif %}</legend>
  <span class="bux-switch__helper-text" id="bux-switch__helper-text-{{ random_seed }}">{{ helper_text }}</span>
  <div class="bux-switch__input-spacer">
    {% for item in items %}
      {% set random_seed_option = random() %}
      {% set switch_option_id = "bux-switch__option-" ~ random_seed_option %}
      <div class="bux-switch__option{% if modifier %} bux-switch__option--{{ modifier }}{% endif %}">
        <input type="checkbox" id="{{ switch_option_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
        <label for="{{ switch_option_id }}">{{ item.text }}</label>
      </div>
    {% endfor %}
  </div>
  {% if "error" in modifier %}
    <span class="bux-switch__error-message" id="bux-switch__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
  {% endif %}
</fieldset>
</div>

Error#

Form Input LabelHelper Text

Item 1

Item 2

Item 3

Error Helper Text

<div class="bux-switch">
    <fieldset class="bux-switch__fieldset" id="bux-switch__switch-1261241686" aria-describedby=" bux-switch__error-message bux-switch__helper-text-1261241686" aria-invalid="true">
        <legend class="bux-switch__legend">Form Input Label</legend>
        <span class="bux-switch__helper-text" id="bux-switch__helper-text-1261241686">Helper Text</span>
        <div class="bux-switch__input-spacer">
            <div class="bux-switch__option bux-switch__option--error">
                <input type="checkbox" id="bux-switch__option-1015284556">
                <label for="bux-switch__option-1015284556">Item 1</label>
            </div>
            <div class="bux-switch__option bux-switch__option--error">
                <input type="checkbox" id="bux-switch__option-1103107948">
                <label for="bux-switch__option-1103107948">Item 2</label>
            </div>
            <div class="bux-switch__option bux-switch__option--error">
                <input type="checkbox" id="bux-switch__option-675305898">
                <label for="bux-switch__option-675305898">Item 3</label>
            </div>
        </div>
        <span class="bux-switch__error-message" id="bux-switch__error-message-1261241686">Error Helper Text</span>
    </fieldset>
</div>

{% set random_seed = random() %}
{% set switch_id = "switch-" ~ random_seed %}

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__{{ switch_id }}" aria-describedby="{% if "error" in modifier %} bux-switch__error-message {% endif %}bux-switch__helper-text-{{ random_seed }}"
  {% if required %} required {% endif %}
  {% if "error" in modifier %} aria-invalid="true" {% endif %}>
  <legend class="bux-switch__legend">{{ legend }}{% if required %} <span class="bux-switch__required">{{required}}</span>{% endif %}</legend>
  <span class="bux-switch__helper-text" id="bux-switch__helper-text-{{ random_seed }}">{{ helper_text }}</span>
  <div class="bux-switch__input-spacer">
    {% for item in items %}
      {% set random_seed_option = random() %}
      {% set switch_option_id = "bux-switch__option-" ~ random_seed_option %}
      <div class="bux-switch__option{% if modifier %} bux-switch__option--{{ modifier }}{% endif %}">
        <input type="checkbox" id="{{ switch_option_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
        <label for="{{ switch_option_id }}">{{ item.text }}</label>
      </div>
    {% endfor %}
  </div>
  {% if "error" in modifier %}
    <span class="bux-switch__error-message" id="bux-switch__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
  {% endif %}
</fieldset>
</div>

Selection Dropdown#

To select one option from a list of options that can be shown or hidden

Primary#

<div class="bux-selection-dropdown">
  <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-373861265">Form Input Label</label>
  <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-373861265">Helper Text</span>
  <div class="bux-selection-dropdown__input">
      <select id="bux-selection-dropdown__selection-dropdown-373861265" aria-describedby="bux-selection-dropdown__helper-text-373861265">
          <option>Choose One</option>
          <option value="Item 1">Item 1</option>
          <option value="Item 2">Item 2</option>
          <option value="Item 3">Item 3</option>
          <option value="Item 4">Item 4</option>
          <option value="Item 5">Item 5</option>
      </select>
  </div>
</div>

{% set random_seed = random() %}
{% set selection_dropdown_id = "selection-dropdown-" ~ random_seed %}

<div class="bux-selection-dropdown">
	<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__{{ selection_dropdown_id }}">{{ input_label }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
	<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-{{ random_seed }}">{{ helper_text }}</span>
	<div class="bux-selection-dropdown__input{% if modifier %} bux-selection-dropdown__input--{{ modifier }}{% endif %}">
    <select id="bux-selection-dropdown__{{ selection_dropdown_id }}" 
		aria-describedby="{% if "error" in modifier %}bux-selection-dropdown__error-message-{{ random_seed }} {% endif %}bux-selection-dropdown__helper-text-{{ random_seed }}" 
		{% if required %} required {% endif %} 
		{% if "disabled" in modifier %} disabled {% endif %}
		{% if "error" in modifier %} aria-invalid="true" {% endif %}>
    	<option>{{ dropdown_label }}</option>
		{% for item in items %}
			<option value="{{ item.text }}">{{ item.text }}</option>
		{% endfor %}
	</select>
</div>
{% if "error" in modifier %}
	<span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
{% endif %}
</div>

Required#

<div class="bux-selection-dropdown">
  <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-169833063">Form Input Label <span class="bux-text-field__required">(required)</span></label>
  <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-169833063">Helper Text</span>
  <div class="bux-selection-dropdown__input">
      <select id="bux-selection-dropdown__selection-dropdown-169833063" aria-describedby="bux-selection-dropdown__helper-text-169833063" required>
          <option>Choose One</option>
          <option value="Item 1">Item 1</option>
          <option value="Item 2">Item 2</option>
          <option value="Item 3">Item 3</option>
          <option value="Item 4">Item 4</option>
          <option value="Item 5">Item 5</option>
      </select>
  </div>
</div>

{% set random_seed = random() %}
{% set selection_dropdown_id = "selection-dropdown-" ~ random_seed %}

<div class="bux-selection-dropdown">
	<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__{{ selection_dropdown_id }}">{{ input_label }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
	<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-{{ random_seed }}">{{ helper_text }}</span>
	<div class="bux-selection-dropdown__input{% if modifier %} bux-selection-dropdown__input--{{ modifier }}{% endif %}">
    <select id="bux-selection-dropdown__{{ selection_dropdown_id }}" 
		aria-describedby="{% if "error" in modifier %}bux-selection-dropdown__error-message-{{ random_seed }} {% endif %}bux-selection-dropdown__helper-text-{{ random_seed }}" 
		{% if required %} required {% endif %} 
		{% if "disabled" in modifier %} disabled {% endif %}
		{% if "error" in modifier %} aria-invalid="true" {% endif %}>
    	<option>{{ dropdown_label }}</option>
		{% for item in items %}
			<option value="{{ item.text }}">{{ item.text }}</option>
		{% endfor %}
	</select>
</div>
{% if "error" in modifier %}
	<span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
{% endif %}
</div>

Disabled#

<div class="bux-selection-dropdown">
  <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-239006786">Form Input Label</label>
  <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-239006786">Helper Text</span>
  <div class="bux-selection-dropdown__input bux-selection-dropdown__input--disabled">
      <select id="bux-selection-dropdown__selection-dropdown-239006786" aria-describedby="bux-selection-dropdown__helper-text-239006786" disabled>
          <option>Choose One</option>
          <option value="Item 1">Item 1</option>
          <option value="Item 2">Item 2</option>
          <option value="Item 3">Item 3</option>
          <option value="Item 4">Item 4</option>
          <option value="Item 5">Item 5</option>
      </select>
  </div>
</div>

{% set random_seed = random() %}
{% set selection_dropdown_id = "selection-dropdown-" ~ random_seed %}

<div class="bux-selection-dropdown">
	<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__{{ selection_dropdown_id }}">{{ input_label }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
	<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-{{ random_seed }}">{{ helper_text }}</span>
	<div class="bux-selection-dropdown__input{% if modifier %} bux-selection-dropdown__input--{{ modifier }}{% endif %}">
    <select id="bux-selection-dropdown__{{ selection_dropdown_id }}" 
		aria-describedby="{% if "error" in modifier %}bux-selection-dropdown__error-message-{{ random_seed }} {% endif %}bux-selection-dropdown__helper-text-{{ random_seed }}" 
		{% if required %} required {% endif %} 
		{% if "disabled" in modifier %} disabled {% endif %}
		{% if "error" in modifier %} aria-invalid="true" {% endif %}>
    	<option>{{ dropdown_label }}</option>
		{% for item in items %}
			<option value="{{ item.text }}">{{ item.text }}</option>
		{% endfor %}
	</select>
</div>
{% if "error" in modifier %}
	<span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
{% endif %}
</div>

Error#

<div class="bux-selection-dropdown">
  <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-1025483971">Form Input Label</label>
  <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-1025483971">Helper Text</span>
  <div class="bux-selection-dropdown__input bux-selection-dropdown__input--error">
      <select id="bux-selection-dropdown__selection-dropdown-1025483971" aria-describedby="bux-selection-dropdown__error-message-1025483971 bux-selection-dropdown__helper-text-1025483971" aria-invalid="true">
          <option>Choose One</option>
          <option value="Item 1">Item 1</option>
          <option value="Item 2">Item 2</option>
          <option value="Item 3">Item 3</option>
          <option value="Item 4">Item 4</option>
          <option value="Item 5">Item 5</option>
      </select>
  </div>
  <span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-1025483971">Error Helper Text</span>
</div>

{% set random_seed = random() %}
{% set selection_dropdown_id = "selection-dropdown-" ~ random_seed %}

<div class="bux-selection-dropdown">
	<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__{{ selection_dropdown_id }}">{{ input_label }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
	<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-{{ random_seed }}">{{ helper_text }}</span>
	<div class="bux-selection-dropdown__input{% if modifier %} bux-selection-dropdown__input--{{ modifier }}{% endif %}">
    <select id="bux-selection-dropdown__{{ selection_dropdown_id }}" 
		aria-describedby="{% if "error" in modifier %}bux-selection-dropdown__error-message-{{ random_seed }} {% endif %}bux-selection-dropdown__helper-text-{{ random_seed }}" 
		{% if required %} required {% endif %} 
		{% if "disabled" in modifier %} disabled {% endif %}
		{% if "error" in modifier %} aria-invalid="true" {% endif %}>
    	<option>{{ dropdown_label }}</option>
		{% for item in items %}
			<option value="{{ item.text }}">{{ item.text }}</option>
		{% endfor %}
	</select>
</div>
{% if "error" in modifier %}
	<span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
{% endif %}
</div>

Multi-Step Form#

Horizontal#

Multi-Step Form

Step 1

Step 2

Step 3

Step 4

<div class="bux-form--field-wrapper">
  <div class="bux-multi-form" id="form-933189514">
    <h2 class="bux-multi-form__title">Multi-Step Form</h2>
    <div class="bux-multi-form__layout bux-multi-form__layout--horizontal">
      <div class="bux-multi-form__progress">
        <div class="bux-multi-form__progress bux-multi-form__progress-filled"></div>
      </div>
      <div class="bux-multi-form__step-container">
        <div class="bux-multi-form__step">
          <div class="bux-multi-form__step-icon bux-multi-form__step-icon--current"></div>
          <div class="bux-multi-form__step-label" aria-current="step">Step 1</div>
        </div>
        <div class="bux-multi-form__step">
          <div class="bux-multi-form__step-icon"></div>
          <div class="bux-multi-form__step-label">Step 2</div>
        </div>
        <div class="bux-multi-form__step">
          <div class="bux-multi-form__step-icon"></div>
          <div class="bux-multi-form__step-label">Step 3</div>
        </div>
        <div class="bux-multi-form__step">
          <div class="bux-multi-form__step-icon"></div>
          <div class="bux-multi-form__step-label">Step 4</div>
        </div>
      </div>
      <div class="bux-multi-form__form-container">
        <form>
          <div class="bux-multi-form__form">
            <h3 class="bux-multi-form__form_title">Step 1</h3>
            <div class="bux-multi-form__form_field">
              <div class="bux-text-field">
                <label class="bux-text-field__label" for="bux-text-field__text-input-1827629774"
                  >Text Field</label
                >
                <span
                  class="bux-text-field__helper-text"
                  id="bux-text-field__helper-text-1827629774"
                  >Helper Text</span
                >
                <input
                  id="bux-text-field__text-input-1827629774"
                  class="bux-text-field__input"
                  placeholder="Placeholder Text (Optional)"
                  aria-describedby="bux-text-field__helper-text-1827629774"
                />
              </div>
            </div>
            <div class="bux-multi-form__form_field">
              <div class="bux-text-area">
                <label class="bux-text-area__label" for="bux-text-area__text-area-1531480320"
                  >Text Area</label
                >
                <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1531480320"
                  >Helper Text</span
                >
                <textarea
                  id="bux-text-area__text-area-1531480320"
                  class="bux-text-area__text-area"
                  placeholder="Placeholder Text (Optional)"
                  aria-describedby="bux-text-area__helper-text-1531480320"
                ></textarea>
              </div>
            </div>
          </div>
          <div class="bux-multi-form__form">
            <h3 class="bux-multi-form__form_title">Step 2</h3>
            <div class="bux-multi-form__form_field">
              <div class="bux-switch">
                <fieldset
                  class="bux-switch__fieldset"
                  id="bux-switch__switch-1375010508"
                  aria-describedby="bux-switch__helper-text-1375010508"
                >
                  <legend class="bux-switch__legend">Switch</legend>
                  <span class="bux-switch__helper-text" id="bux-switch__helper-text-1375010508"
                    >Helper Text</span
                  >
                  <div class="bux-switch__input-spacer">
                    <div class="bux-switch__option">
                      <input type="checkbox" id="bux-switch__option-1728877531" />
                      <label for="bux-switch__option-1728877531">Item 1</label>
                    </div>
                    <div class="bux-switch__option">
                      <input type="checkbox" id="bux-switch__option-950247196" />
                      <label for="bux-switch__option-950247196">Item 2</label>
                    </div>
                    <div class="bux-switch__option">
                      <input type="checkbox" id="bux-switch__option-1963048789" />
                      <label for="bux-switch__option-1963048789">Item 3</label>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>
          <div class="bux-multi-form__form">
            <h3 class="bux-multi-form__form_title">Step 3</h3>
            <div class="bux-multi-form__form_field">
              <div class="bux-radio">
                <fieldset
                  class="bux-radio__fieldset"
                  id="bux-radio__radio-1573315872"
                  role="radiogroup"
                  aria-describedby="bux-checkbox__helper-text-1573315872"
                >
                  <legend class="bux-radio__legend">Radio Button</legend>
                  <span class="bux-radio__helper-text" id="bux-radio__helper-text-1573315872"
                    >Helper Text</span
                  >
                  <div class="bux-radio__input-spacer">
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-621481243"
                        name="radio-1573315872"
                      />
                      <label for="bux-radio__option-621481243">Item 1</label>
                    </div>
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-1138810998"
                        name="radio-1573315872"
                      />
                      <label for="bux-radio__option-1138810998">Item 2</label>
                    </div>
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-1726204956"
                        name="radio-1573315872"
                      />
                      <label for="bux-radio__option-1726204956">Item 3</label>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
            <div class="bux-multi-form__form_field">
              <div class="bux-checkbox">
                <fieldset
                  class="bux-checkbox__fieldset"
                  id="bux-checkbox__checkbox-1638208253"
                  aria-describedby="bux-checkbox__helper-text-1638208253"
                >
                  <legend class="bux-checkbox__legend">Checkbox</legend>
                  <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1638208253"
                    >Helper Text</span
                  >
                  <div class="bux-checkbox__input-spacer">
                    <div class="bux-checkbox__option">
                      <input type="checkbox" id="bux-checkbox__option-2060945147" value="item_1" />
                      <label for="bux-checkbox__option-2060945147">Item 1</label>
                    </div>
                    <div class="bux-checkbox__option">
                      <input type="checkbox" id="bux-checkbox__option-546055543" value="item_2" />
                      <label for="bux-checkbox__option-546055543">Item 2</label>
                    </div>
                    <div class="bux-checkbox__option">
                      <input type="checkbox" id="bux-checkbox__option-1158342462" value="item_3" />
                      <label for="bux-checkbox__option-1158342462">Item 3</label>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>
          <div class="bux-multi-form__form">
            <h3 class="bux-multi-form__form_title">Step 4</h3>
            <div class="bux-multi-form__form_field">
              <div class="bux-selection-dropdown">
                <label
                  class="bux-selection-dropdown__label"
                  for="bux-selection-dropdown__selection-dropdown-398917604"
                  >Selection Dropdown</label
                >
                <span
                  class="bux-selection-dropdown__helper-text"
                  id="bux-selection-dropdown__helper-text-398917604"
                  >Helper Text</span
                >
                <div class="bux-selection-dropdown__input">
                  <select
                    id="bux-selection-dropdown__selection-dropdown-398917604"
                    aria-describedby="bux-selection-dropdown__helper-text-398917604"
                  >
                    <option>Choose One</option>
                    <option value="Item 1">Item 1</option>
                    <option value="Item 2">Item 2</option>
                    <option value="Item 3">Item 3</option>
                    <option value="Item 4">Item 4</option>
                    <option value="Item 5">Item 5</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="bux-multi-form__button-container">
            <div class="bux-multi-form__back-button">
              <button class="bux-button bux-button--alt">Back:</button>
            </div>
            <div class="bux-multi-form__next-button">
              <button class="bux-button">Next: Step 2</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="bux-form--field-wrapper">
<div class="bux-multi-form" id="form-{{ random() }}">
    <h2 class="bux-multi-form__title">{{ form_title }}</h2>
    <div class="bux-multi-form__layout bux-multi-form__layout--{{direction}}">
        <div class="bux-multi-form__progress">
            <div class="bux-multi-form__progress bux-multi-form__progress-filled"></div>
        </div>
        <div class="bux-multi-form__step-container">
            {% for step in steps %}
                <div class="bux-multi-form__step">
                    {% if loop.index is same as(1) %}
                        <div class="bux-multi-form__step-icon bux-multi-form__step-icon--current"></div>                   
                        <div class="bux-multi-form__step-label" aria-current="step">{{step.name}}</div>
                    {% else %}
                        <div class="bux-multi-form__step-icon"></div>
                        <div class="bux-multi-form__step-label">{{step.name}}</div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <div class="bux-multi-form__form-container">
            <form>
                {% for step in steps %}
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">{{ step.name }}</h3>
                        {% for question in step.questions %}
                            <div class="bux-multi-form__form_field">
                                {% set form_field = '@' ~ question.field|trim %}
                                {% include form_field with (question.context ?? {}) %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
                <div class="bux-multi-form__button-container">
                    <div class="bux-multi-form__back-button">
                        {% render '@button' with {button_text: 'Back:', modifier: 'alt' } %}
                    </div>
                    <div class="bux-multi-form__next-button">
                        {% render '@button' with {button_text: 'Next: ' ~ steps[1].name} %}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

Vertical#

Multi-Step Form

Step 1

Step 2

Step 3

Step 4

<div class="bux-multi-form__layout bux-multi-form__layout--vertical">

<div class="bux-form--field-wrapper">
<div class="bux-multi-form" id="form-{{ random() }}">
    <h2 class="bux-multi-form__title">{{ form_title }}</h2>
    <div class="bux-multi-form__layout bux-multi-form__layout--{{direction}}">
        <div class="bux-multi-form__progress">
            <div class="bux-multi-form__progress bux-multi-form__progress-filled"></div>
        </div>
        <div class="bux-multi-form__step-container">
            {% for step in steps %}
                <div class="bux-multi-form__step">
                    {% if loop.index is same as(1) %}
                        <div class="bux-multi-form__step-icon bux-multi-form__step-icon--current"></div>                   
                        <div class="bux-multi-form__step-label" aria-current="step">{{step.name}}</div>
                    {% else %}
                        <div class="bux-multi-form__step-icon"></div>
                        <div class="bux-multi-form__step-label">{{step.name}}</div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <div class="bux-multi-form__form-container">
            <form>
                {% for step in steps %}
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">{{ step.name }}</h3>
                        {% for question in step.questions %}
                            <div class="bux-multi-form__form_field">
                                {% set form_field = '@' ~ question.field|trim %}
                                {% include form_field with (question.context ?? {}) %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
                <div class="bux-multi-form__button-container">
                    <div class="bux-multi-form__back-button">
                        {% render '@button' with {button_text: 'Back:', modifier: 'alt' } %}
                    </div>
                    <div class="bux-multi-form__next-button">
                        {% render '@button' with {button_text: 'Next: ' ~ steps[1].name} %}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

Usage#

Dos#

Use brief input field labels that clearly state the required input
- Use sentence case without punctuation
Use inclusive language
If using a Dropdown, limit the number of options to 10 or fewer
Sort options in an order that is appropriate for the data, such as alphabetical or chronological

Don’ts#

Don’t display Switches inline because it may confuse the user as to which label is associated with which Switch

Accessibility#

Designers and developers must envision all the error states that a user can get in. It is required to provide clear error messages. When possible, the error messages must explain how to resolve errors.
Error messages must clearly identify the cause or location of the error or be programmatically linked to the input where the error occurred.
- When the form submission causes a new page to load as in server side validation, It is helpful to add the text such as “Form Error:” to the page <title>.
- If an error summary is presented at the top of the form. Make sure it is read first if users use the “skip to main content” link. Make sure the “skip to main content” link does not skip over the error summary.
- If an error summary is presented at the top of the form, set tabindex="-1" on its container and use Javascript to set focus on the error summary container after the page finishes loading.
Take advantage of the HTML5 autocomplete attribute. If the field’s input value is one of the autocomplete types listed in WCAG you must use an appropriate autocomplete type.
Form elements must have a visible label that accurately describes the purpose of the form control. The form element must be associated with it’s label. The best way is to include the attribute aria-labelledby on the form element and use the id of the <label> as the value for aria-labelledby.
Checkbox and Radio button groups must be contained by a <fieldset> element. <fieldset> may be used to enclose other form elements that are part of a group (e.g. a shipping address).
<fieldset>s must have a <legend> that names or describes the purpose of the <fieldset>.
Fields with identical purposes must have identical names across a group of pages in the site. Don't use user name one place and login in another place.
Field <label>’s values should not be overridden with aria-label or aria-labelledby. This causes difficulties for some people using voice control because the name the user sees is not the same as the name used by assistive technology.
Focusing or changing a field’s value must not cause changes to the page context. Using script to load a new page or swap out significant parts of the current page so that it changes the meaning of the page is a WCAG violation.
Implementation of a multi-step form should inform the user when its step changes
- If the implementation causes the page to reload, the page <title> should identify the current step (“Grant application form: Step 2”).
- If the implementation uses Javascript to display the current step (as with AJAX or single page applications), the developer should use an aria-live notification to communicate the step change.
Required fields must have a visual indicator, usually an asterisk: (*) or the text: (required). When using the asterisk, there should be text at the beginning of each page of the form stating that “*” means this is a required field.
- Explain validation and required conditions for complex form controls. If a group of checkboxes is shown as required, explain the conditions for an acceptable entry if there is not a specific requirement for each checkbox. (example: “Choose at least two items”)
- If a form has a single checkbox or a group of checkboxes where some or all of them are explicitly required you must use the required attribute in the individual <input>s (example: a consent section of a form where the user has to confirm that they understand the impact of checking the box) For this case the required marker should be on each checkbox label that requires the user to check. This example is not shown in the sample code, because each use case will be unique.
- Checkboxes or switches that are individually and explicitly required, must put their aria-invalid attribute within the individual <input> and not in the fieldset container when these types of fields are validated.

Text Field#

Primary#

Required#

Disabled#

Error#

Password Field#

Text Area#

Primary#

Required#

Disabled#

Error#

Checkbox#

Primary#

Required#

Disabled#

Error#

Radio Button#

Primary#

Required#

Disabled#

Error#

Switch#

Primary#

Required#

Disabled#

Error#

Selection Dropdown#

Primary#

Required#

Disabled#

Error#

Multi-Step Form#

Horizontal#

Multi-Step Form

Step 1

Step 2

Step 3

Step 4

Vertical#

Multi-Step Form

Step 1

Step 2

Step 3

Step 4

Usage#

Dos#

Don’ts#

Accessibility#

Form Accessibility Resources#