Radio Panels

A native radio group paired with deterministically related caller-owned panel content.

When to use it. Use it when its native document or form semantics match the caller-owned requirement.

Native baseline Exact fallback

Radio Panels primary example

Account view

Summary

Selected summary panel.

Activity with a long translated label

Activity panel remains in source order.

Unavailable

Disabled choice explanation remains readable.

<.radio_panels id="view" name="view" selected="summary"><:legend>View</:legend><:option key="summary" value="summary" label="Summary">Summary content.</:option></.radio_panels>

How it works

<.radio_panels> Native radio keys and submission remain authoritative. This is not a Tab Group; without enhancement CSS every panel remains visible.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :radio_panels does not ship them.
application boundary Radio Panels uses native form radios. True tabs require tab roles, focus management, and a separately approved keyboard runtime.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Native elements, names, relationships, focus, and keyboard behavior remain authoritative.

Radio Panels support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.

Application ownership and API

Native radio keys and submission remain authoritative. This is not a Tab Group; without enhancement CSS every panel remains visible.

Choosing the related control. Radio Panels uses native form radios. True tabs require tab roles, focus management, and a separately approved keyboard runtime.

Public API Package source

Provenance

Catalogue identity content.radio_panels, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Rename and adapt the upstream radio-based visual pattern into an honest native HEEX Radio Panels contract with deterministic relationships, ordinary form submission, complete-content fallback, and no tab roles or client state.