Site search uses a real <form role="search"> with type="search" inputs—Pico adds a search icon and consistent padding. Stack the field and button with role="group" on a fieldset for toolbar-style search bars.
Native dialog
For confirmations, command palettes, or “quick help,” use the semantic <dialog> element. Pico styles dialog + inner article with header, body, and footer regions. Pico does not ship modal JavaScript—you open dialogs with HTMLDialogElement.showModal() or the open attribute for static demos.
Accessibility
- Give the dialog an accessible name via
aria-labelledbypointing at the heading inside. - Close controls should be real
buttonelements witharia-label="Close". - Return focus to the trigger when the dialog closes in production scripts.
Self-check
- Which input type triggers Pico’s search icon styling?
- What element wraps modal content in Pico’s recommended pattern?
- Who is responsible for opening and closing dialogs—Pico or your JS?