Input types and controls

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Input types and controls—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 Input types and controls 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.

When the previous lesson's MCQs feel easy and you can explain Input types and controls in your own words.

Pico ships dedicated styles for common input types: textarea, select, checkboxes, radios, type="search", type="file", type="range", color and date pickers, and switches via type="checkbox" role="switch".

Checkboxes, radios, and switches

Group related radios in a fieldset with a legend (covered next lesson).
Toggle switches use the checkbox + role="switch" pattern Pico documents—still native inputs, not custom div widgets.
disabled and readonly use browser semantics; Pico dims disabled controls automatically.

Submit vs button inputs

type="submit" and type="button" inputs render like buttons. Reset inputs get Pico’s secondary styling by default—use sparingly in production forms.

Self-check

How do you style a toggle switch in Pico without a custom component?
Which attribute disables a control for keyboard and assistive tech users?
When is textarea preferable to a single-line input?

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

New input type learned?
Mobile keyboard hints?

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