Input and button groups

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Input and button groups—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Input and button groups in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Input groups fuse prefixes, suffixes, and action buttons with a text field. Wrap siblings in input-group: static text uses input-group-label, the field uses input-group-field, and buttons live in input-group-button.

Button groups

button-group clusters related actions (segmented filters, toolbar controls). Use expanded on one button when it should fill remaining space in a bar layout.

When to stop

One primary action per group keeps tab order predictable. Complex pickers (date ranges, tag chips) deserve a dedicated component—not five addons glued to one input.

Self-check

Which class wraps the actual text input in a group?
Where does a search submit button belong?
When is an input group the wrong pattern?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Grouped inputs use case?
Button group a11y?

No discussion yet. Be the first to ask a question.