Multi-Step Form
JSThis component requires JavaScript.
A multi-step form guides users through a long form by breaking it into smaller, sequential steps.
A multi-step form is designed for complex forms – such as applications, registrations or information requests – that require multiple inputs. By dividing inputs into manageable steps, users are able to focus on one task at a time, making long forms feel more approachable and easier to complete. Clear step labels and progress indicators help users understand where they are in the process and what comes next.
Default
Indoor space request
<div class="bux-multi-step-form bux-multi-form" id="form-1036481246">
<div class="bux-multi-form__layout">
<div class="bux-multi-form__form-container">
<div class="bux-multi-form__header">
<h2 class="bux-heading bux-multi-form__title">Indoor space request</h2>
<div class="bux-progress-bar" aria-label="Progress" role="group">
<div class="bux-progress-bar__track">
<div class="bux-progress-bar__fill"></div>
</div>
<div class="bux-progress-bar__steps-container">
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">1</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">2</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">3</span>
</div>
<div class="bux-progress-bar__success">
<span class="bux-progress-bar__success-icon">
<span class="visually-hidden" data-chrome-nvda-support>
progress complete
</span>
</span>
</div>
</div>
</div>
</div>
<form class="bux-multi-form__form">
<div
aria-live="polite"
class="visually-hidden bux-multi-form__announcer"
></div>
<div class="bux-multi-form__form-step is-active">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Contact info</span>
<span class="bux-multi-form__step-counter">(Step 1 of 3)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-447573043"
>
First Name
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<input
value=""
id="bux-text-field__text-field-447573043"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-447573043"
aria-describedby="false"
required
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-1526365780"
>
Last Name
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<input
value=""
id="bux-text-field__text-field-1526365780"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-1526365780"
aria-describedby="false"
required
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-155204676"
>
Title
</label>
<input
value=""
id="bux-text-field__text-field-155204676"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-155204676"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-1671940099"
>
Company
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<input
value=""
id="bux-text-field__text-field-1671940099"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-1671940099"
aria-describedby="false"
required
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-1647064847"
>
Email
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<input
value=""
id="bux-text-field__text-field-1647064847"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-1647064847"
aria-describedby="false"
required
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-1892305937"
>
Phone
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<span
class="bux-helper bux-text-field__helper-text"
id="bux-text-field__helper-text-1892305937"
>
Include area code
</span>
<input
value=""
id="bux-text-field__text-field-1892305937"
class="bux-form-element__control bux-text-field__input"
placeholder="555-555-5555"
name="bux-text-field__text-field-1892305937"
aria-describedby="bux-text-field__helper-text-1892305937"
required
aria-invalid="false"
/>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Event basics</span>
<span class="bux-multi-form__step-counter">(Step 2 of 3)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-368180193"
>
Event Name
</label>
<input
value=""
id="bux-text-field__text-field-368180193"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-368180193"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown bux-form-element">
<label
class="bux-descriptor bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-930071229"
>
Type of Event
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-930071229"
name="selection-dropdown-event-type"
aria-describedby="false"
aria-invalid="false"
>
<option>Choose One</option>
<option value="Symposium">Symposium</option>
<option value="Lecture">Lecture</option>
<option value="Holiday">Holiday</option>
</select>
</div>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-857229553"
>
Event Start Date
</label>
<input
value=""
id="bux-text-field__text-field-857229553"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-857229553"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-2089781292"
>
Event End Date
</label>
<input
value=""
id="bux-text-field__text-field-2089781292"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-2089781292"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio-button bux-form-element">
<fieldset
id="bux-radio-button__radio-button-594759794"
class="bux-radio-button__fieldset"
name="radio-button-flexible"
aria-describedby="false"
aria-invalid="false"
>
<legend class="bux-descriptor bux-radio-button__legend">
Is your date flexible?
</legend>
<div class="bux-radio-button__input-spacer">
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-404735899"
name="radio-button-flexible"
value="Yes"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-404735899">
Yes
</label>
</div>
</div>
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-1495135684"
name="radio-button-flexible"
value="No"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-1495135684">
No
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-872767101"
>
Timeframe of Event
</label>
<input
value=""
id="bux-text-field__text-field-872767101"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-872767101"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Event details</span>
<span class="bux-multi-form__step-counter">(Step 3 of 3)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-1537445454"
>
Total Number of Guests
</label>
<input
value=""
id="bux-text-field__text-field-1537445454"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-1537445454"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown bux-form-element">
<label
class="bux-descriptor bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-1928555715"
>
Room Setup
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-1928555715"
name="selection-dropdown-room-setup"
aria-describedby="false"
aria-invalid="false"
>
<option>Choose One</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio-button bux-form-element">
<fieldset
id="bux-radio-button__radio-button-1745391746"
class="bux-radio-button__fieldset"
name="radio-button-breakout"
aria-describedby="false"
aria-invalid="false"
>
<legend class="bux-descriptor bux-radio-button__legend">
Are breakout rooms required?
</legend>
<div class="bux-radio-button__input-spacer">
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-729658467"
name="radio-button-breakout"
value="Yes"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-729658467">
Yes
</label>
</div>
</div>
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-1856423003"
name="radio-button-breakout"
value="No"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-1856423003">
No
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio-button bux-form-element">
<fieldset
id="bux-radio-button__radio-button-636883645"
class="bux-radio-button__fieldset"
name="radio-button-catering"
aria-describedby="false"
aria-invalid="false"
>
<legend class="bux-descriptor bux-radio-button__legend">
Is catering required?
</legend>
<div class="bux-radio-button__input-spacer">
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-1801559990"
name="radio-button-catering"
value="Yes"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-1801559990">
Yes
</label>
</div>
</div>
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-1822824547"
name="radio-button-catering"
value="No"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-1822824547">
No
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio-button bux-form-element">
<fieldset
id="bux-radio-button__radio-button-460017721"
class="bux-radio-button__fieldset"
name="radio-button-overnight"
aria-describedby="false"
aria-invalid="false"
>
<legend class="bux-descriptor bux-radio-button__legend">
Will your group require overnight rooms?
</legend>
<div class="bux-radio-button__input-spacer">
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-662410657"
name="radio-button-overnight"
value="Yes"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-662410657">
Yes
</label>
</div>
</div>
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-503250243"
name="radio-button-overnight"
value="No"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-503250243">No</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio-button bux-form-element">
<fieldset
id="bux-radio-button__radio-button-860709651"
class="bux-radio-button__fieldset"
name="radio-button-venue"
aria-describedby="false"
aria-invalid="false"
>
<legend class="bux-descriptor bux-radio-button__legend">
Do you have a preferred venue?
</legend>
<div class="bux-radio-button__input-spacer">
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-17822815"
name="radio-button-venue"
value="Yes"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-17822815">Yes</label>
</div>
</div>
<div class="bux-radio-button__option">
<input
type="radio"
id="bux-radio-button__option-317862960"
name="radio-button-venue"
value="No"
/>
<div class="bux-radio-button__option__content">
<label for="bux-radio-button__option-317862960">No</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-area bux-form-element">
<label
class="bux-descriptor bux-text-area__label"
for="bux-text-area__text-area-187510241"
>
Additional Comments
</label>
<textarea
id="bux-text-area__text-area-187510241"
class="bux-form-element__control bux-text-area__text-area"
placeholder="Placeholder Text"
name="bux-text-area__text-area-187510241"
aria-describedby="false"
aria-invalid="false"
></textarea>
</div>
</div>
</div>
<div class="bux-multi-form__confirmation">
<div class="bux-multi-form__confirmation-content">
<h2 class="bux-heading bux-multi-form__form-title-container">
Form complete
</h2>
<div>Thank you for submitting.</div>
</div>
</div>
<div class="bux-multi-form__button-container">
<div class="bux-multi-form__back-button">
<button type="button" class="bux-button bux-button--alt">
Back
</button>
</div>
<div class="bux-multi-form__next-button">
<button type="button" class="bux-button">Next</button>
</div>
</div>
</form>
</div>
</div>
</div>
{#
Buckeye UX - version 1.7.0
Copyright (C) 2026 The Ohio State University
#}
{#
Multi Step Form
Available Variables:
- form_title: Title of the multi-step form.
- steps: An array of steps. Each step contains an array of form fields.
- modifier: Optional. Modifier for the multi-step form: null, featured.
- featured_card_type: Optional. Featured card type if using the featured modifier: image, panel, text.
- featured_card_data: Optional. Featured card data: [image_url, image_alt_ext] or [panel_title, panel_text]
- featured_card_position: Optional. Position of the featured card: left, right.
This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.
Last Updated: 07-29-2026 15:20:47
#}
{% if featured_card_type %}
{% set featured_card_position = featured_card_position|default('left') %}
{% endif %}
{% set featured_card %}
{% if featured_card_type %}
<div class="bux-multi-form__featured-card">
{% if featured_card_type == 'image' %}
{% include '@bux/image/image.twig' with featured_card_data %}
{% elseif featured_card_type == 'panel' %}
{% include '@bux/panel/panel.twig' with featured_card_data %}
{% elseif featured_card_type == 'text' %}
<div class="bux-multi-form__text">
{{ featured_card_data.text|raw }}
</div>
{% endif %}
</div>
{% endif %}
{% endset %}
<div class="bux-multi-step-form bux-multi-form" id="form-{{ random() }}">
<div class="bux-multi-form__layout">
{% if featured_card_position == 'left' %}{{ featured_card }}{% endif %}
<div
class="bux-multi-form__form-container{{ featured_card_type ? ' bux-multi-form__form-container--featured' : '' }}{{
modifier
? " bux-multi-form__form-container--#{modifier}"
: ''
}}"
>
<div class="bux-multi-form__header">
{% include '@bux/heading/heading.twig' with {
heading_text: form_title,
heading_level: 2,
base_class: 'bux-multi-form__title'
} only %}
{% include '@bux/forms/_subcomponents/progress-bar/progress-bar.twig' %}
</div>
<form class="bux-multi-form__form">
<div aria-live="polite" class="visually-hidden bux-multi-form__announcer"></div>
{% for step in steps %}
<div class="bux-multi-form__form-step{{ loop.index == 1 ? ' is-active' : '' }}">
{% embed '@bux/heading/heading.twig'
with {
form_title,
steps,
heading_level: 3,
base_class: 'bux-multi-form__form-step-title-container',
step_name: step.name,
step_count: loop.index,
total_steps: steps|length
} only
%}
{% block heading_content %}
<span class="bux-multi-form__form-step-title">{{ step_name }}</span>
<span class="bux-multi-form__step-counter">(Step {{ step_count }} of {{ total_steps }})</span>
{% endblock heading_content %}
{% endembed %}
{% for question in step.questions %}
<div class="bux-multi-form__form-field">
{% set form_field = '@bux/forms/' ~ (question.field|trim) ~ '/' ~ (question.field|trim) ~ '.twig' %}
{% include form_field with question.context ?? {} only %}
</div>
{% endfor %}
</div>
{% endfor %}
<div class="bux-multi-form__confirmation">
<div class="bux-multi-form__confirmation-content">
{% include '@bux/heading/heading.twig' with {
heading_text: 3,
heading_text: confirmation.subtitle|default('Form complete'),
base_class: 'bux-multi-form__form-title-container'
} only %}
<div>
{{ confirmation.text|default('Thank you for submitting.') }}
</div>
</div>
</div>
<div class="bux-multi-form__button-container">
<div class="bux-multi-form__back-button">
{% include '@bux/button/button.twig' with {
button_text: 'Back',
modifier: 'alt'
} only %}
</div>
<div class="bux-multi-form__next-button">
{% include '@bux/button/button.twig' with {
button_text: 'Next'
} only %}
</div>
</div>
</form>
</div>
{% if featured_card_position == 'right' %}{{ featured_card }}{% endif %}
</div>
</div>
Featured Image Card
Indoor space request
<div class="bux-multi-form" id="form-43670895">
<div class="bux-multi-form__layout">
<div class="bux-multi-form__featured-card">
<img
class="bux-image"
src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
alt="Image placeholder."
height=""
width=""
/>
</div>
<div class="bux-multi-form__form-container bux-multi-form__form-container--featured">
<div class="bux-multi-form__header">
<h2 class="bux-multi-form__title">Indoor space request</h2>
<div class="bux-progress-bar" aria-label="Progress" role="group">
<div class="bux-progress-bar__track">
<div class="bux-progress-bar__fill"></div>
</div>
<div class="bux-progress-bar__steps-container">
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">1</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">2</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">3</span>
</div>
<div class="bux-progress-bar__success">
<span class="bux-progress-bar__success-icon"></span>
</div>
</div>
</div>
</div>
<form class="bux-multi-form__form">
<div class="bux-multi-form__form-step is-active">
<h3 class="bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Contact info</span>
<span class="bux-multi-form__step-counter">(Step 1 of 3)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-130068103">
First Name
<span class="bux-text-field__required">(required)</span>
</label>
<input
id="bux-text-field__text-field-130068103"
class="bux-text-field__input"
name="bux-text-field__text-field-130068103"
placeholder="Placeholder Text"
required
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-193399906">
Last Name
<span class="bux-text-field__required">(required)</span>
</label>
<input
id="bux-text-field__text-field-193399906"
class="bux-text-field__input"
name="bux-text-field__text-field-193399906"
placeholder="Placeholder Text"
required
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-1505931780">
Title
</label>
<input
id="bux-text-field__text-field-1505931780"
class="bux-text-field__input"
name="bux-text-field__text-field-1505931780"
placeholder="Placeholder Text"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-1417944259">
Company
<span class="bux-text-field__required">(required)</span>
</label>
<input
id="bux-text-field__text-field-1417944259"
class="bux-text-field__input"
name="bux-text-field__text-field-1417944259"
placeholder="Placeholder Text"
required
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-1870376963">
Email
<span class="bux-text-field__required">(required)</span>
</label>
<input
id="bux-text-field__text-field-1870376963"
class="bux-text-field__input"
name="bux-text-field__text-field-1870376963"
placeholder="Placeholder Text"
required
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-677650805">
Phone
<span class="bux-text-field__required">(required)</span>
</label>
<span class="bux-text-field__helper-text" id="bux-text-field__helper-text-677650805">
Include area code
</span>
<input
id="bux-text-field__text-field-677650805"
class="bux-text-field__input"
name="bux-text-field__text-field-677650805"
aria-describedby="bux-text-field__helper-text-677650805"
placeholder="555-555-5555"
required
/>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Event basics</span>
<span class="bux-multi-form__step-counter">(Step 2 of 3)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-1891755143">
Event Name
</label>
<input
id="bux-text-field__text-field-1891755143"
class="bux-text-field__input"
name="bux-text-field__text-field-1891755143"
placeholder="Placeholder Text"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown">
<label
class="bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-926186826"
>
Choose One
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-926186826"
name="selection-dropdown-event-type"
>
<option>Choose One</option>
<option value="Symposium">Symposium</option>
<option value="Lecture">Lecture</option>
<option value="Holiday">Holiday</option>
</select>
</div>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-643375478">
Event Start Date
</label>
<input
id="bux-text-field__text-field-643375478"
class="bux-text-field__input"
name="bux-text-field__text-field-643375478"
placeholder="Placeholder Text"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-875743339">
Event End Date
</label>
<input
id="bux-text-field__text-field-875743339"
class="bux-text-field__input"
name="bux-text-field__text-field-875743339"
placeholder="Placeholder Text"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio">
<fieldset id="bux-radio__radio-1329144211" class="bux-radio__fieldset">
<legend class="bux-radio__legend">Is your date flexible?</legend>
<div class="bux-radio__input-spacer">
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-1258194820"
name="radio-button-flexible"
/>
<label for="bux-radio__option-1258194820">Yes</label>
</div>
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-411302258"
name="radio-button-flexible"
/>
<label for="bux-radio__option-411302258">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-1721899918">
Timeframe of Event
</label>
<input
id="bux-text-field__text-field-1721899918"
class="bux-text-field__input"
name="bux-text-field__text-field-1721899918"
placeholder="Placeholder Text"
/>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Event details</span>
<span class="bux-multi-form__step-counter">(Step 3 of 3)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-field-2053587103">
Total Number of Guests
</label>
<input
id="bux-text-field__text-field-2053587103"
class="bux-text-field__input"
name="bux-text-field__text-field-2053587103"
placeholder="Placeholder Text"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown">
<label
class="bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-1308280216"
>
Choose One
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-1308280216"
name="selection-dropdown-room-setup"
>
<option>Choose One</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio">
<fieldset id="bux-radio__radio-1967569561" class="bux-radio__fieldset">
<legend class="bux-radio__legend">Are breakout rooms required?</legend>
<div class="bux-radio__input-spacer">
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-248521292"
name="radio-button-breakout"
/>
<label for="bux-radio__option-248521292">Yes</label>
</div>
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-1182689875"
name="radio-button-breakout"
/>
<label for="bux-radio__option-1182689875">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio">
<fieldset id="bux-radio__radio-950548759" class="bux-radio__fieldset">
<legend class="bux-radio__legend">Is catering required?</legend>
<div class="bux-radio__input-spacer">
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-1371888240"
name="radio-button-catering"
/>
<label for="bux-radio__option-1371888240">Yes</label>
</div>
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-1803384438"
name="radio-button-catering"
/>
<label for="bux-radio__option-1803384438">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio">
<fieldset id="bux-radio__radio-1290324380" class="bux-radio__fieldset">
<legend class="bux-radio__legend">Will your group require overnight rooms?</legend>
<div class="bux-radio__input-spacer">
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-1060500201"
name="radio-button-overnight"
/>
<label for="bux-radio__option-1060500201">Yes</label>
</div>
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-10073608"
name="radio-button-overnight"
/>
<label for="bux-radio__option-10073608">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-radio">
<fieldset id="bux-radio__radio-332710701" class="bux-radio__fieldset">
<legend class="bux-radio__legend">Do you have a preferred venue?</legend>
<div class="bux-radio__input-spacer">
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-775211997"
name="radio-button-venue"
/>
<label for="bux-radio__option-775211997">Yes</label>
</div>
<div class="bux-radio__option">
<input
type="radio"
id="bux-radio__option-1030532802"
name="radio-button-venue"
/>
<label for="bux-radio__option-1030532802">No</label>
</div>
</div>
</fieldset>
</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-1822565060">
Additional Comments
</label>
<textarea
id="bux-text-area__text-area-1822565060"
class="bux-text-area__text-area"
name="bux-text-area__text-area-1822565060"
placeholder="Placeholder Text"
></textarea>
</div>
</div>
</div>
<div class="bux-multi-form__confirmation">
<div class="bux-multi-form__confirmation-content">
<h3 class="bux-multi-form__form-title-container">Form complete</h3>
<div>Thank you for submitting.</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</button>
</div>
</div>
</form>
</div>
</div>
</div>
{#
Buckeye UX - version 1.7.0
Copyright (C) 2026 The Ohio State University
#}
{#
Multi Step Form
Available Variables:
- form_title: Title of the multi-step form.
- steps: An array of steps. Each step contains an array of form fields.
- modifier: Optional. Modifier for the multi-step form: null, featured.
- featured_card_type: Optional. Featured card type if using the featured modifier: image, panel, text.
- featured_card_data: Optional. Featured card data: [image_url, image_alt_ext] or [panel_title, panel_text]
- featured_card_position: Optional. Position of the featured card: left, right.
This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.
Last Updated: 07-29-2026 15:20:47
#}
{% if featured_card_type %}
{% set featured_card_position = featured_card_position|default('left') %}
{% endif %}
{% set featured_card %}
{% if featured_card_type %}
<div class="bux-multi-form__featured-card">
{% if featured_card_type == 'image' %}
{% include '@bux/image/image.twig' with featured_card_data %}
{% elseif featured_card_type == 'panel' %}
{% include '@bux/panel/panel.twig' with featured_card_data %}
{% elseif featured_card_type == 'text' %}
<div class="bux-multi-form__text">
{{ featured_card_data.text|raw }}
</div>
{% endif %}
</div>
{% endif %}
{% endset %}
<div class="bux-multi-step-form bux-multi-form" id="form-{{ random() }}">
<div class="bux-multi-form__layout">
{% if featured_card_position == 'left' %}{{ featured_card }}{% endif %}
<div
class="bux-multi-form__form-container{{ featured_card_type ? ' bux-multi-form__form-container--featured' : '' }}{{
modifier
? " bux-multi-form__form-container--#{modifier}"
: ''
}}"
>
<div class="bux-multi-form__header">
{% include '@bux/heading/heading.twig' with {
heading_text: form_title,
heading_level: 2,
base_class: 'bux-multi-form__title'
} only %}
{% include '@bux/forms/_subcomponents/progress-bar/progress-bar.twig' %}
</div>
<form class="bux-multi-form__form">
<div aria-live="polite" class="visually-hidden bux-multi-form__announcer"></div>
{% for step in steps %}
<div class="bux-multi-form__form-step{{ loop.index == 1 ? ' is-active' : '' }}">
{% embed '@bux/heading/heading.twig'
with {
form_title,
steps,
heading_level: 3,
base_class: 'bux-multi-form__form-step-title-container',
step_name: step.name,
step_count: loop.index,
total_steps: steps|length
} only
%}
{% block heading_content %}
<span class="bux-multi-form__form-step-title">{{ step_name }}</span>
<span class="bux-multi-form__step-counter">(Step {{ step_count }} of {{ total_steps }})</span>
{% endblock heading_content %}
{% endembed %}
{% for question in step.questions %}
<div class="bux-multi-form__form-field">
{% set form_field = '@bux/forms/' ~ (question.field|trim) ~ '/' ~ (question.field|trim) ~ '.twig' %}
{% include form_field with question.context ?? {} only %}
</div>
{% endfor %}
</div>
{% endfor %}
<div class="bux-multi-form__confirmation">
<div class="bux-multi-form__confirmation-content">
{% include '@bux/heading/heading.twig' with {
heading_text: 3,
heading_text: confirmation.subtitle|default('Form complete'),
base_class: 'bux-multi-form__form-title-container'
} only %}
<div>
{{ confirmation.text|default('Thank you for submitting.') }}
</div>
</div>
</div>
<div class="bux-multi-form__button-container">
<div class="bux-multi-form__back-button">
{% include '@bux/button/button.twig' with {
button_text: 'Back',
modifier: 'alt'
} only %}
</div>
<div class="bux-multi-form__next-button">
{% include '@bux/button/button.twig' with {
button_text: 'Next'
} only %}
</div>
</div>
</form>
</div>
{% if featured_card_position == 'right' %}{{ featured_card }}{% endif %}
</div>
</div>
Featured Panel Card
Sign up to hear from our college.
Stay in the loop with everything happening on campus, from upcoming admissions deadlines to exciting student life updates. Join our mailing list today and take your first step toward becoming a part of our vibrant community.
Program interest form
<div class="bux-multi-step-form bux-multi-form" id="form-562057566">
<div class="bux-multi-form__layout">
<div class="bux-multi-form__featured-card">
<div class="bux-panel">
<h2 class="bux-heading bux-panel__heading">
Sign up to hear from our college.
</h2>
<p>
Stay in the loop with everything happening on campus, from upcoming
admissions deadlines to exciting student life updates. Join our
mailing list today and take your first step toward becoming a part of
our vibrant community.
</p>
</div>
</div>
<div
class="bux-multi-form__form-container bux-multi-form__form-container--featured"
>
<div class="bux-multi-form__header">
<h2 class="bux-heading bux-multi-form__title">Program interest form</h2>
<div class="bux-progress-bar" aria-label="Progress" role="group">
<div class="bux-progress-bar__track">
<div class="bux-progress-bar__fill"></div>
</div>
<div class="bux-progress-bar__steps-container">
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">1</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">2</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">3</span>
</div>
<div class="bux-progress-bar__step bux-progress-bar__step--current">
<span class="bux-progress-bar__icon">4</span>
</div>
<div class="bux-progress-bar__success">
<span class="bux-progress-bar__success-icon">
<span class="visually-hidden" data-chrome-nvda-support>
progress complete
</span>
</span>
</div>
</div>
</div>
</div>
<form class="bux-multi-form__form">
<div
aria-live="polite"
class="visually-hidden bux-multi-form__announcer"
></div>
<div class="bux-multi-form__form-step is-active">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">
Learning about you
</span>
<span class="bux-multi-form__step-counter">(Step 1 of 4)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-769564200"
>
Name
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<input
value=""
id="bux-text-field__text-field-769564200"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-769564200"
aria-describedby="false"
required
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown bux-form-element">
<label
class="bux-descriptor bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-1218939993"
>
Are you a high school senior?
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-1218939993"
name="bux-selection-dropdown__selection-dropdown-1218939993"
aria-describedby="false"
aria-invalid="false"
>
<option>Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Your goals</span>
<span class="bux-multi-form__step-counter">(Step 2 of 4)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown bux-form-element">
<label
class="bux-descriptor bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-924587621"
>
Program of interest
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-924587621"
name="bux-selection-dropdown__selection-dropdown-924587621"
aria-describedby="false"
aria-invalid="false"
>
<option>Choose One</option>
<option value="Program 1">Program 1</option>
<option value="Program 2">Program 2</option>
<option value="Program 3">Program 3</option>
</select>
</div>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown bux-form-element">
<label
class="bux-descriptor bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-1658588840"
>
Expected start term
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-1658588840"
name="bux-selection-dropdown__selection-dropdown-1658588840"
aria-describedby="false"
aria-invalid="false"
>
<option>Choose One</option>
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
</div>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Contact</span>
<span class="bux-multi-form__step-counter">(Step 3 of 4)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-908603214"
>
Email
<span class="bux-required bux-text-field__required">
(required)
</span>
</label>
<input
value=""
id="bux-text-field__text-field-908603214"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-908603214"
aria-describedby="false"
required
aria-invalid="false"
/>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-field bux-form-element">
<label
class="bux-descriptor bux-text-field__label"
for="bux-text-field__text-field-54851361"
>
Phone Number
</label>
<input
value=""
id="bux-text-field__text-field-54851361"
class="bux-form-element__control bux-text-field__input"
placeholder="Placeholder Text"
name="bux-text-field__text-field-54851361"
aria-describedby="false"
aria-invalid="false"
/>
</div>
</div>
</div>
<div class="bux-multi-form__form-step">
<h3 class="bux-heading bux-multi-form__form-step-title-container">
<span class="bux-multi-form__form-step-title">Next steps</span>
<span class="bux-multi-form__step-counter">(Step 4 of 4)</span>
</h3>
<div class="bux-multi-form__form-field">
<div class="bux-selection-dropdown bux-form-element">
<label
class="bux-descriptor bux-selection-dropdown__label"
for="bux-selection-dropdown__selection-dropdown-1678925204"
>
How did you hear about us?
</label>
<div class="bux-selection-dropdown__input">
<select
id="bux-selection-dropdown__selection-dropdown-1678925204"
name="bux-selection-dropdown__selection-dropdown-1678925204"
aria-describedby="false"
aria-invalid="false"
>
<option>Choose One</option>
<option value="Newsletter">Newsletter</option>
<option value="Email">Email</option>
<option value="Program Member">Program Member</option>
</select>
</div>
</div>
</div>
<div class="bux-multi-form__form-field">
<div class="bux-text-area bux-form-element">
<label
class="bux-descriptor bux-text-area__label"
for="bux-text-area__text-area-154865217"
>
Any other notes to share with our team?
</label>
<textarea
id="bux-text-area__text-area-154865217"
class="bux-form-element__control bux-text-area__text-area"
name="bux-text-area__text-area-154865217"
aria-describedby="false"
aria-invalid="false"
></textarea>
</div>
</div>
</div>
<div class="bux-multi-form__confirmation">
<div class="bux-multi-form__confirmation-content">
<h2 class="bux-heading bux-multi-form__form-title-container">
Form complete
</h2>
<div>Thank you for submitting.</div>
</div>
</div>
<div class="bux-multi-form__button-container">
<div class="bux-multi-form__back-button">
<button type="button" class="bux-button bux-button--alt">
Back
</button>
</div>
<div class="bux-multi-form__next-button">
<button type="button" class="bux-button">Next</button>
</div>
</div>
</form>
</div>
</div>
</div>
{#
Buckeye UX - version 1.7.0
Copyright (C) 2026 The Ohio State University
#}
{#
Multi Step Form
Available Variables:
- form_title: Title of the multi-step form.
- steps: An array of steps. Each step contains an array of form fields.
- modifier: Optional. Modifier for the multi-step form: null, featured.
- featured_card_type: Optional. Featured card type if using the featured modifier: image, panel, text.
- featured_card_data: Optional. Featured card data: [image_url, image_alt_ext] or [panel_title, panel_text]
- featured_card_position: Optional. Position of the featured card: left, right.
This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.
Last Updated: 07-29-2026 15:20:47
#}
{% if featured_card_type %}
{% set featured_card_position = featured_card_position|default('left') %}
{% endif %}
{% set featured_card %}
{% if featured_card_type %}
<div class="bux-multi-form__featured-card">
{% if featured_card_type == 'image' %}
{% include '@bux/image/image.twig' with featured_card_data %}
{% elseif featured_card_type == 'panel' %}
{% include '@bux/panel/panel.twig' with featured_card_data %}
{% elseif featured_card_type == 'text' %}
<div class="bux-multi-form__text">
{{ featured_card_data.text|raw }}
</div>
{% endif %}
</div>
{% endif %}
{% endset %}
<div class="bux-multi-step-form bux-multi-form" id="form-{{ random() }}">
<div class="bux-multi-form__layout">
{% if featured_card_position == 'left' %}{{ featured_card }}{% endif %}
<div
class="bux-multi-form__form-container{{ featured_card_type ? ' bux-multi-form__form-container--featured' : '' }}{{
modifier
? " bux-multi-form__form-container--#{modifier}"
: ''
}}"
>
<div class="bux-multi-form__header">
{% include '@bux/heading/heading.twig' with {
heading_text: form_title,
heading_level: 2,
base_class: 'bux-multi-form__title'
} only %}
{% include '@bux/forms/_subcomponents/progress-bar/progress-bar.twig' %}
</div>
<form class="bux-multi-form__form">
<div aria-live="polite" class="visually-hidden bux-multi-form__announcer"></div>
{% for step in steps %}
<div class="bux-multi-form__form-step{{ loop.index == 1 ? ' is-active' : '' }}">
{% embed '@bux/heading/heading.twig'
with {
form_title,
steps,
heading_level: 3,
base_class: 'bux-multi-form__form-step-title-container',
step_name: step.name,
step_count: loop.index,
total_steps: steps|length
} only
%}
{% block heading_content %}
<span class="bux-multi-form__form-step-title">{{ step_name }}</span>
<span class="bux-multi-form__step-counter">(Step {{ step_count }} of {{ total_steps }})</span>
{% endblock heading_content %}
{% endembed %}
{% for question in step.questions %}
<div class="bux-multi-form__form-field">
{% set form_field = '@bux/forms/' ~ (question.field|trim) ~ '/' ~ (question.field|trim) ~ '.twig' %}
{% include form_field with question.context ?? {} only %}
</div>
{% endfor %}
</div>
{% endfor %}
<div class="bux-multi-form__confirmation">
<div class="bux-multi-form__confirmation-content">
{% include '@bux/heading/heading.twig' with {
heading_text: 3,
heading_text: confirmation.subtitle|default('Form complete'),
base_class: 'bux-multi-form__form-title-container'
} only %}
<div>
{{ confirmation.text|default('Thank you for submitting.') }}
</div>
</div>
</div>
<div class="bux-multi-form__button-container">
<div class="bux-multi-form__back-button">
{% include '@bux/button/button.twig' with {
button_text: 'Back',
modifier: 'alt'
} only %}
</div>
<div class="bux-multi-form__next-button">
{% include '@bux/button/button.twig' with {
button_text: 'Next'
} only %}
</div>
</div>
</form>
</div>
{% if featured_card_position == 'right' %}{{ featured_card }}{% endif %}
</div>
</div>
Usage
Dos
- Use the step indicator when the user is working through a form or process that will span several different pages that can be organized into three or more high-level steps or chapters.
- Group related fields into logical steps so each step has a clear purpose.
- When writing step titles, be concise. Limit to a few words.
- Display step and total with the step title, such as "Step 1 of 3" to reinforce the number of steps and help users understand where they are in the process.
Don’ts
- Don’t use a multi-step form for short forms without logical groupings or sections. If a form or process has fewer than three sections, consider standard Form components.
- Don't hide critical information, such as requirements or deadlines, until late in the process.
Implementation notes
Submission Handling
- This component intercepts the standard form submission and dispatches a custom JavaScript event (
bux-form:submit) on the main container. If this event isn't captured, it defaults to simulating a 1-second loading state before showing the success screen. - To actually handle submissions, you must listen for the
bux-form:submitevent, cancel the default behaviorevent.preventDefault()and trigger your callback.
/**
* Simple Custom Submission Script Example
* - Intercept the submission default and POST the results to your endpoint
*/
const formContainer = document.querySelector('#your-multi-step-form-id');
formContainer.addEventListener('bux-form:submit', (event) => {
event.preventDefault(); // Cancels the default behavior
// Access event details provided by the JavaScript
const formData = event.detail.formData;
const { success, fail } = event.detail
fetch('/your-endpoint', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
// Transitions the form to the confirmation page
success();
} else {
// Alert user of problem without proceeding to the confirmation page
fail('Something went wrong. Please try again.');
}
})
.catch(error => {
// Alert user of problem without proceeding to the confirmation page
fail(error.message);
});
}
Defining Steps
- Each step should be a wrapper
divwith the classbux-multi-form__form-step. The script will count the number of elements with this class. - The first step in your form should include the
is-activeclass on initial load - Form Elements for a particular step should be nested within the step
divwrappers. Refer to form element documentation for implementation notes per form element.
Important Things to Keep in Mind
- All Multi-Step Forms are initialized via the top-level container's ID. If that doesn't exist, the form will not initialize.
- If any of the following elements are not available on initialization, the JavaScript will fail with a
TypeError: form, next/back button, progress bar wrapper, container, confirmation wrapper- If the form isn't initializing check your console and see if this error is popping up