Labels, fieldsets, and 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 Labels, fieldsets, and groups—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Labels, fieldsets, and groups in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs. Also complete the hands-on challenge before advancing.

When the previous lesson's MCQs feel easy and you can explain Labels, fieldsets, and groups in your own words.

Group related controls with fieldset and legend—the accessible pattern for radio clusters, address blocks, and payment sections. Pico styles legends with the same visual weight as form labels.

Horizontal groups

Use role="group" on a wrapper (often the fieldset itself) to stack buttons or inputs in a row—search bars, prefix + input combos, and button toolbars. Unlike class="grid", groups do not collapse on small screens; reserve them for short control clusters.

Grid inside forms

Pico’s class="grid" inside a form splits fields into columns at wider viewports—handy for city/state/ZIP rows while keeping one semantic form.

Important interview questions and answers

Q: Why fieldset instead of nested divs?
A: Screen readers announce the group boundary and legend; divs need extra ARIA to match that behavior.
Q: When use role="group" vs grid?
A: role="group" for inline toolbars and compact rows; grid for responsive multi-column field layout.

Self-check

Which element names a related set of radio buttons for assistive tech?
What role stacks a search input and button on one line?

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

for/id on every control?
legend for groups?

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