RadioGroup
StorybookA set of radio buttons with keyboard navigation and single selection. Demonstrated in all 3 state modes.
Client-only RadioGroup
No server events. Selection and keyboard navigation are handled purely via JavaScript.
Horizontal Orientation
Use orientation="horizontal" for a horizontal layout.
Arrow Left/Right navigate between items.
Hybrid
JS selects instantly for responsiveness, then pushes the event to the server. The event log below updates via LiveView.
Server-controlled
The server owns the state. Use the buttons below to control the selection externally.
"comfortable"
Disabled Items
Individual items can be disabled. Keyboard navigation skips disabled items.
Form Integration
With a name attr, RadioGroup syncs a hidden input
for native form submission. Works with phx-change
and phx-submit.
Push Event (Server → Client)
The server pushes commands to a client-mode radio group via
push_event/3.