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 Label Helper Text

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Field

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled, password.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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" aria-label="Show Password" aria-pressed="false"></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-1110803401"
    >Form Input Label
    <span class="bux-text-field__required">(required)</span></label
  >
  <span
    class="bux-text-field__helper-text"
    id="bux-text-field__helper-text-1110803401"
    >Helper Text</span
  >
  <input
    id="bux-text-field__text-input-1110803401"
    class="bux-text-field__input"
    required
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-field__helper-text-1110803401"
  />
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Field

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled, password.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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" aria-label="Show Password" aria-pressed="false"></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 Label Helper Text

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Field

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled, password.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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" aria-label="Show Password" aria-pressed="false"></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 Label Helper Text Error Helper Text

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Field

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled, password.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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" aria-label="Show Password" aria-pressed="false"></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 Label Helper Text

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

  <button
    class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button"
    id="bux-text-field__password-toggle-90823430"
    title="Show Password"
    aria-label="Show Password"
    aria-pressed="false"
  ></button>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Field

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled, password.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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" aria-label="Show Password" aria-pressed="false"></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 Label Helper Text

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Area

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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-249954950"
    >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-249954950"
    >Helper Text</span
  >
  <textarea
    id="bux-text-area__text-area-249954950"
    class="bux-text-area__text-area"
    required
    placeholder="Placeholder Text (Optional)"
    aria-describedby="bux-text-area__helper-text-249954950"
  ></textarea>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Area

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

<div class="bux-text-area">
  <label class="bux-text-area__label" for="bux-text-area__text-area-1520338234"
    >Form Input Label</label
  >
  <span
    class="bux-text-area__helper-text"
    id="bux-text-area__helper-text-1520338234"
    >Helper Text</span
  >
  <textarea
    id="bux-text-area__text-area-1520338234"
    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-1520338234"
  ></textarea>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Area

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text Error Helper Text

<div class="bux-text-area">
  <label class="bux-text-area__label" for="bux-text-area__text-area-388312710"
    >Form Input Label</label
  >
  <span
    class="bux-text-area__helper-text"
    id="bux-text-area__helper-text-388312710"
    >Helper Text</span
  >
  <textarea
    id="bux-text-area__text-area-388312710"
    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-388312710 bux-text-area__helper-text-388312710"
  ></textarea>
  <span
    class="bux-text-area__error-message"
    id="bux-text-area__error-message-388312710"
    >Error Helper Text</span
  >
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Text Area

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

Item 1

Item 2

Item 3

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Checkbox

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- item.value:       Value for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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-1795127145"
    aria-describedby="bux-checkbox__helper-text-1795127145"
    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-1795127145"
      >Helper Text</span
    >
    <div class="bux-checkbox__input-spacer">
      <div class="bux-checkbox__option">
        <input
          type="checkbox"
          id="bux-checkbox__option-2081035224"
          value="item_1"
        />
        <label for="bux-checkbox__option-2081035224">Item 1</label>
      </div>
      <div class="bux-checkbox__option">
        <input
          type="checkbox"
          id="bux-checkbox__option-1137731754"
          value="item_2"
        />
        <label for="bux-checkbox__option-1137731754">Item 2</label>
      </div>
      <div class="bux-checkbox__option">
        <input
          type="checkbox"
          id="bux-checkbox__option-940012815"
          value="item_3"
        />
        <label for="bux-checkbox__option-940012815">Item 3</label>
      </div>
    </div>
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Checkbox

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- item.value:       Value for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

Item 1

Item 2

Item 3

<div class="bux-checkbox">
  <fieldset
    class="bux-checkbox__fieldset"
    id="bux-checkbox__checkbox-2013898759"
    aria-describedby="bux-checkbox__helper-text-2013898759"
  >
    <legend class="bux-checkbox__legend">Form Input Label</legend>
    <span
      class="bux-checkbox__helper-text"
      id="bux-checkbox__helper-text-2013898759"
      >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-69408136"
          value="item_1"
          disabled
        />
        <label for="bux-checkbox__option-69408136">Item 1</label>
      </div>
      <div class="bux-checkbox__option bux-checkbox__option--disabled">
        <input
          type="checkbox"
          id="bux-checkbox__option-1946126111"
          value="item_2"
          disabled
        />
        <label for="bux-checkbox__option-1946126111">Item 2</label>
      </div>
      <div class="bux-checkbox__option bux-checkbox__option--disabled">
        <input
          type="checkbox"
          id="bux-checkbox__option-289983693"
          value="item_3"
          disabled
        />
        <label for="bux-checkbox__option-289983693">Item 3</label>
      </div>
    </div>
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Checkbox

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- item.value:       Value for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

Item 1

Item 2

Item 3

Error Helper Text

<div class="bux-checkbox">
  <fieldset
    class="bux-checkbox__fieldset"
    id="bux-checkbox__checkbox-1398669667"
    aria-describedby="bux-checkbox__error-message-1398669667 bux-checkbox__helper-text-1398669667"
    aria-invalid="true"
  >
    <legend class="bux-checkbox__legend">Form Input Label</legend>
    <span
      class="bux-checkbox__helper-text"
      id="bux-checkbox__helper-text-1398669667"
      >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-77348493"
          value="item_1"
        />
        <label for="bux-checkbox__option-77348493">Item 1</label>
      </div>
      <div class="bux-checkbox__option bux-checkbox__option--error">
        <input
          type="checkbox"
          id="bux-checkbox__option-206936503"
          value="item_2"
        />
        <label for="bux-checkbox__option-206936503">Item 2</label>
      </div>
      <div class="bux-checkbox__option bux-checkbox__option--error">
        <input
          type="checkbox"
          id="bux-checkbox__option-1078925457"
          value="item_3"
        />
        <label for="bux-checkbox__option-1078925457">Item 3</label>
      </div>
    </div>
    <span
      class="bux-checkbox__error-message"
      id="bux-checkbox__error-message-1398669667"
      >Error Helper Text</span
    >
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Checkbox

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- item.value:       Value for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

Item 1

Item 2

Item 3

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Radio Button

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}


{% 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-44369827"
    role="radiogroup"
    aria-describedby="bux-checkbox__helper-text-44369827"
    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-44369827"
      >Helper Text</span
    >
    <div class="bux-radio__input-spacer">
      <div class="bux-radio__option">
        <input
          type="radio"
          id="bux-radio__option-1221307695"
          name="radio-44369827"
        />
        <label for="bux-radio__option-1221307695">Item 1</label>
      </div>
      <div class="bux-radio__option">
        <input
          type="radio"
          id="bux-radio__option-1895360373"
          name="radio-44369827"
        />
        <label for="bux-radio__option-1895360373">Item 2</label>
      </div>
      <div class="bux-radio__option">
        <input
          type="radio"
          id="bux-radio__option-2146128783"
          name="radio-44369827"
        />
        <label for="bux-radio__option-2146128783">Item 3</label>
      </div>
    </div>
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Radio Button

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}


{% 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 Label Helper Text

Item 1

Item 2

Item 3

<div class="bux-radio">
  <fieldset
    class="bux-radio__fieldset"
    id="bux-radio__radio-270044990"
    role="radiogroup"
    aria-describedby="bux-checkbox__helper-text-270044990"
  >
    <legend class="bux-radio__legend">Form Input Label</legend>
    <span class="bux-radio__helper-text" id="bux-radio__helper-text-270044990"
      >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-1910173756"
          name="radio-270044990"
          disabled
        />
        <label for="bux-radio__option-1910173756">Item 1</label>
      </div>
      <div class="bux-radio__option bux-radio__option--disabled">
        <input
          type="radio"
          id="bux-radio__option-1853573407"
          name="radio-270044990"
          disabled
        />
        <label for="bux-radio__option-1853573407">Item 2</label>
      </div>
      <div class="bux-radio__option bux-radio__option--disabled">
        <input
          type="radio"
          id="bux-radio__option-1055365186"
          name="radio-270044990"
          disabled
        />
        <label for="bux-radio__option-1055365186">Item 3</label>
      </div>
    </div>
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Radio Button

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}


{% 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 Label Helper Text

Item 1

Item 2

Item 3

Error Helper Text

<div class="bux-radio">
  <fieldset
    class="bux-radio__fieldset"
    id="bux-radio__radio-1346978071"
    role="radiogroup"
    aria-describedby=" bux-radio__error-message bux-checkbox__helper-text-1346978071"
    aria-invalid="true"
  >
    <legend class="bux-radio__legend">Form Input Label</legend>
    <span class="bux-radio__helper-text" id="bux-radio__helper-text-1346978071"
      >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-1116966255"
          name="radio-1346978071"
        />
        <label for="bux-radio__option-1116966255">Item 1</label>
      </div>
      <div class="bux-radio__option bux-radio__option--error">
        <input
          type="radio"
          id="bux-radio__option-2099955167"
          name="radio-1346978071"
        />
        <label for="bux-radio__option-2099955167">Item 2</label>
      </div>
      <div class="bux-radio__option bux-radio__option--error">
        <input
          type="radio"
          id="bux-radio__option-1965292949"
          name="radio-1346978071"
        />
        <label for="bux-radio__option-1965292949">Item 3</label>
      </div>
    </div>
    <span
      class="bux-radio__error-message"
      id="bux-radio__error-message-1346978071"
      >Error Helper Text</span
    >
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Radio Button

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}


{% 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 Label Helper Text

Item 1

Item 2

Item 3

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

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Switch

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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-1158509452"
    aria-describedby="bux-switch__helper-text-1158509452"
    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-1158509452"
      >Helper Text</span
    >
    <div class="bux-switch__input-spacer">
      <div class="bux-switch__option">
        <input type="checkbox" id="bux-switch__option-1061267460" />
        <label for="bux-switch__option-1061267460">Item 1</label>
      </div>
      <div class="bux-switch__option">
        <input type="checkbox" id="bux-switch__option-476667596" />
        <label for="bux-switch__option-476667596">Item 2</label>
      </div>
      <div class="bux-switch__option">
        <input type="checkbox" id="bux-switch__option-2102742460" />
        <label for="bux-switch__option-2102742460">Item 3</label>
      </div>
    </div>
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Switch

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

Item 1

Item 2

Item 3

<div class="bux-switch">
  <fieldset
    class="bux-switch__fieldset"
    id="bux-switch__switch-967886001"
    aria-describedby="bux-switch__helper-text-967886001"
  >
    <legend class="bux-switch__legend">Form Input Label</legend>
    <span class="bux-switch__helper-text" id="bux-switch__helper-text-967886001"
      >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-1337836054" disabled />
        <label for="bux-switch__option-1337836054">Item 1</label>
      </div>
      <div class="bux-switch__option bux-switch__option--disabled">
        <input type="checkbox" id="bux-switch__option-1184860001" disabled />
        <label for="bux-switch__option-1184860001">Item 2</label>
      </div>
      <div class="bux-switch__option bux-switch__option--disabled">
        <input type="checkbox" id="bux-switch__option-1021706091" disabled />
        <label for="bux-switch__option-1021706091">Item 3</label>
      </div>
    </div>
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Switch

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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 Label Helper Text

Item 1

Item 2

Item 3

Error Helper Text

<div class="bux-switch">
  <fieldset
    class="bux-switch__fieldset"
    id="bux-switch__switch-555167926"
    aria-describedby=" bux-switch__error-message bux-switch__helper-text-555167926"
    aria-invalid="true"
  >
    <legend class="bux-switch__legend">Form Input Label</legend>
    <span class="bux-switch__helper-text" id="bux-switch__helper-text-555167926"
      >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-130410292" />
        <label for="bux-switch__option-130410292">Item 1</label>
      </div>
      <div class="bux-switch__option bux-switch__option--error">
        <input type="checkbox" id="bux-switch__option-793268499" />
        <label for="bux-switch__option-793268499">Item 2</label>
      </div>
      <div class="bux-switch__option bux-switch__option--error">
        <input type="checkbox" id="bux-switch__option-924582207" />
        <label for="bux-switch__option-924582207">Item 3</label>
      </div>
    </div>
    <span
      class="bux-switch__error-message"
      id="bux-switch__error-message-555167926"
      >Error Helper Text</span
    >
  </fieldset>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Switch

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- legend:           String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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>

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-1430711628"
    >Form Input Label</label
  >
  <span
    class="bux-selection-dropdown__helper-text"
    id="bux-selection-dropdown__helper-text-1430711628"
    >Helper Text</span
  >
  <div class="bux-selection-dropdown__input">
    <select
      id="bux-selection-dropdown__selection-dropdown-1430711628"
      aria-describedby="bux-selection-dropdown__helper-text-1430711628"
    >
      <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>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Selection Dropdown

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- dropdown_label:   String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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-615514105"
    >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-615514105"
    >Helper Text</span
  >
  <div class="bux-selection-dropdown__input">
    <select
      id="bux-selection-dropdown__selection-dropdown-615514105"
      aria-describedby="bux-selection-dropdown__helper-text-615514105"
      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>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Selection Dropdown

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- dropdown_label:   String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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-149194738"
    >Form Input Label</label
  >
  <span
    class="bux-selection-dropdown__helper-text"
    id="bux-selection-dropdown__helper-text-149194738"
    >Helper Text</span
  >
  <div
    class="bux-selection-dropdown__input bux-selection-dropdown__input--disabled"
  >
    <select
      id="bux-selection-dropdown__selection-dropdown-149194738"
      aria-describedby="bux-selection-dropdown__helper-text-149194738"
      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>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Selection Dropdown

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- dropdown_label:   String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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-1844619907"
    >Form Input Label</label
  >
  <span
    class="bux-selection-dropdown__helper-text"
    id="bux-selection-dropdown__helper-text-1844619907"
    >Helper Text</span
  >
  <div
    class="bux-selection-dropdown__input bux-selection-dropdown__input--error"
  >
    <select
      id="bux-selection-dropdown__selection-dropdown-1844619907"
      aria-describedby="bux-selection-dropdown__error-message-1844619907 bux-selection-dropdown__helper-text-1844619907"
      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-1844619907"
    >Error Helper Text</span
  >
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Selection Dropdown

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error,disabled.
- dropdown_label:   String for the form legend.
- helper_text:      String for the form helper text.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% 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

Step 1

Text Field Helper Text

Text Area Helper Text

Step 2

Switch Helper Text

Item 1

Item 2

Item 3

Step 3

Radio Button Helper Text

Item 1

Item 2

Item 3

Checkbox Helper Text

Item 1

Item 2

Item 3

Step 4

<div class="bux-form--field-wrapper">
  <div class="bux-multi-form" id="form-1004385782">
    <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-1597404450"
                  >Text Field</label
                >
                <span
                  class="bux-text-field__helper-text"
                  id="bux-text-field__helper-text-1597404450"
                  >Helper Text</span
                >
                <input
                  id="bux-text-field__text-input-1597404450"
                  class="bux-text-field__input"
                  placeholder="Placeholder Text (Optional)"
                  aria-describedby="bux-text-field__helper-text-1597404450"
                />
              </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-998036159"
                  >Text Area</label
                >
                <span
                  class="bux-text-area__helper-text"
                  id="bux-text-area__helper-text-998036159"
                  >Helper Text</span
                >
                <textarea
                  id="bux-text-area__text-area-998036159"
                  class="bux-text-area__text-area"
                  placeholder="Placeholder Text (Optional)"
                  aria-describedby="bux-text-area__helper-text-998036159"
                ></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-1058786230"
                  aria-describedby="bux-switch__helper-text-1058786230"
                >
                  <legend class="bux-switch__legend">Switch</legend>
                  <span
                    class="bux-switch__helper-text"
                    id="bux-switch__helper-text-1058786230"
                    >Helper Text</span
                  >
                  <div class="bux-switch__input-spacer">
                    <div class="bux-switch__option">
                      <input
                        type="checkbox"
                        id="bux-switch__option-434164027"
                      />
                      <label for="bux-switch__option-434164027">Item 1</label>
                    </div>
                    <div class="bux-switch__option">
                      <input type="checkbox" id="bux-switch__option-53262923" />
                      <label for="bux-switch__option-53262923">Item 2</label>
                    </div>
                    <div class="bux-switch__option">
                      <input
                        type="checkbox"
                        id="bux-switch__option-668691834"
                      />
                      <label for="bux-switch__option-668691834">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-1224401112"
                  role="radiogroup"
                  aria-describedby="bux-checkbox__helper-text-1224401112"
                >
                  <legend class="bux-radio__legend">Radio Button</legend>
                  <span
                    class="bux-radio__helper-text"
                    id="bux-radio__helper-text-1224401112"
                    >Helper Text</span
                  >
                  <div class="bux-radio__input-spacer">
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-331972857"
                        name="radio-1224401112"
                      />
                      <label for="bux-radio__option-331972857">Item 1</label>
                    </div>
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-947219910"
                        name="radio-1224401112"
                      />
                      <label for="bux-radio__option-947219910">Item 2</label>
                    </div>
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-912471099"
                        name="radio-1224401112"
                      />
                      <label for="bux-radio__option-912471099">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-397052467"
                  aria-describedby="bux-checkbox__helper-text-397052467"
                >
                  <legend class="bux-checkbox__legend">Checkbox</legend>
                  <span
                    class="bux-checkbox__helper-text"
                    id="bux-checkbox__helper-text-397052467"
                    >Helper Text</span
                  >
                  <div class="bux-checkbox__input-spacer">
                    <div class="bux-checkbox__option">
                      <input
                        type="checkbox"
                        id="bux-checkbox__option-1195425229"
                        value="item_1"
                      />
                      <label for="bux-checkbox__option-1195425229"
                        >Item 1</label
                      >
                    </div>
                    <div class="bux-checkbox__option">
                      <input
                        type="checkbox"
                        id="bux-checkbox__option-1642506594"
                        value="item_2"
                      />
                      <label for="bux-checkbox__option-1642506594"
                        >Item 2</label
                      >
                    </div>
                    <div class="bux-checkbox__option">
                      <input
                        type="checkbox"
                        id="bux-checkbox__option-582946312"
                        value="item_3"
                      />
                      <label for="bux-checkbox__option-582946312">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-108333962"
                  >Selection Dropdown</label
                >
                <span
                  class="bux-selection-dropdown__helper-text"
                  id="bux-selection-dropdown__helper-text-108333962"
                  >Helper Text</span
                >
                <div class="bux-selection-dropdown__input">
                  <select
                    id="bux-selection-dropdown__selection-dropdown-108333962"
                    aria-describedby="bux-selection-dropdown__helper-text-108333962"
                  >
                    <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>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Multi Step Form

Available variables:

- direction:        Either 'vertical' or 'horizontal'.
- steps:            Array containing a list of steps for the form.
- step.name:        String for the name of the step.
- step.questions:   Array containing a list of forms.
- question.field:   Machine name of the form field.
- question.context: Array of variables for each field item. See each form item's
                    documentation for more details.

#}

<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

Step 1

Text Field Helper Text

Text Area Helper Text

Step 2

Switch Helper Text

Item 1

Item 2

Item 3

Step 3

Radio Button Helper Text

Item 1

Item 2

Item 3

Checkbox Helper Text

Item 1

Item 2

Item 3

Step 4

<div class="bux-form--field-wrapper">
  <div class="bux-multi-form" id="form-1686678400">
    <h2 class="bux-multi-form__title">Multi-Step Form</h2>
    <div class="bux-multi-form__layout bux-multi-form__layout--vertical">
      <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-1535274610"
                  >Text Field</label
                >
                <span
                  class="bux-text-field__helper-text"
                  id="bux-text-field__helper-text-1535274610"
                  >Helper Text</span
                >
                <input
                  id="bux-text-field__text-input-1535274610"
                  class="bux-text-field__input"
                  placeholder="Placeholder Text (Optional)"
                  aria-describedby="bux-text-field__helper-text-1535274610"
                />
              </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-1793322155"
                  >Text Area</label
                >
                <span
                  class="bux-text-area__helper-text"
                  id="bux-text-area__helper-text-1793322155"
                  >Helper Text</span
                >
                <textarea
                  id="bux-text-area__text-area-1793322155"
                  class="bux-text-area__text-area"
                  placeholder="Placeholder Text (Optional)"
                  aria-describedby="bux-text-area__helper-text-1793322155"
                ></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-1133286117"
                  aria-describedby="bux-switch__helper-text-1133286117"
                >
                  <legend class="bux-switch__legend">Switch</legend>
                  <span
                    class="bux-switch__helper-text"
                    id="bux-switch__helper-text-1133286117"
                    >Helper Text</span
                  >
                  <div class="bux-switch__input-spacer">
                    <div class="bux-switch__option">
                      <input
                        type="checkbox"
                        id="bux-switch__option-1980488894"
                      />
                      <label for="bux-switch__option-1980488894">Item 1</label>
                    </div>
                    <div class="bux-switch__option">
                      <input
                        type="checkbox"
                        id="bux-switch__option-2063970461"
                      />
                      <label for="bux-switch__option-2063970461">Item 2</label>
                    </div>
                    <div class="bux-switch__option">
                      <input
                        type="checkbox"
                        id="bux-switch__option-956588136"
                      />
                      <label for="bux-switch__option-956588136">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-693824982"
                  role="radiogroup"
                  aria-describedby="bux-checkbox__helper-text-693824982"
                >
                  <legend class="bux-radio__legend">Radio Button</legend>
                  <span
                    class="bux-radio__helper-text"
                    id="bux-radio__helper-text-693824982"
                    >Helper Text</span
                  >
                  <div class="bux-radio__input-spacer">
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-163375155"
                        name="radio-693824982"
                      />
                      <label for="bux-radio__option-163375155">Item 1</label>
                    </div>
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-696646674"
                        name="radio-693824982"
                      />
                      <label for="bux-radio__option-696646674">Item 2</label>
                    </div>
                    <div class="bux-radio__option">
                      <input
                        type="radio"
                        id="bux-radio__option-297398883"
                        name="radio-693824982"
                      />
                      <label for="bux-radio__option-297398883">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-921356573"
                  aria-describedby="bux-checkbox__helper-text-921356573"
                >
                  <legend class="bux-checkbox__legend">Checkbox</legend>
                  <span
                    class="bux-checkbox__helper-text"
                    id="bux-checkbox__helper-text-921356573"
                    >Helper Text</span
                  >
                  <div class="bux-checkbox__input-spacer">
                    <div class="bux-checkbox__option">
                      <input
                        type="checkbox"
                        id="bux-checkbox__option-451848827"
                        value="item_1"
                      />
                      <label for="bux-checkbox__option-451848827">Item 1</label>
                    </div>
                    <div class="bux-checkbox__option">
                      <input
                        type="checkbox"
                        id="bux-checkbox__option-462922095"
                        value="item_2"
                      />
                      <label for="bux-checkbox__option-462922095">Item 2</label>
                    </div>
                    <div class="bux-checkbox__option">
                      <input
                        type="checkbox"
                        id="bux-checkbox__option-1363387040"
                        value="item_3"
                      />
                      <label for="bux-checkbox__option-1363387040"
                        >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-468607906"
                  >Selection Dropdown</label
                >
                <span
                  class="bux-selection-dropdown__helper-text"
                  id="bux-selection-dropdown__helper-text-468607906"
                  >Helper Text</span
                >
                <div class="bux-selection-dropdown__input">
                  <select
                    id="bux-selection-dropdown__selection-dropdown-468607906"
                    aria-describedby="bux-selection-dropdown__helper-text-468607906"
                  >
                    <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>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Multi Step Form

Available variables:

- direction:        Either 'vertical' or 'horizontal'.
- steps:            Array containing a list of steps for the form.
- step.name:        String for the name of the step.
- step.questions:   Array containing a list of forms.
- question.field:   Machine name of the form field.
- question.context: Array of variables for each field item. See each form item's
                    documentation for more details.

#}

<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​

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

Vertical

Usage

Dos

Don’ts

Accessibility

Form Accessibility Resources