Lottra

Loading

Fetching the page content

Loading
Lottra

HyperUI-Inspired Selection Lab

Shared Radio Group Debug Surface

Use this local page to exercise the shared radio group component across card, split, and pill layouts while inspecting the serialized form payload.

Card stack

Delivery card options

This mirrors the HyperUI delivery layout with stacked cards, supporting copy, and trailing selection indicators.

Delivery speed *

Choose the fulfillment lane that best matches the promised arrival window.

Large cards work well for checkout, fulfillment, and plan selection flows.

Selected label
No selection
Selected value
No selection
Selected meta
No selection
Selected description
No selection

Visible inputs

Right-aligned compact radios

This variant keeps the native radio visible on the edge while preserving richer copy in each row.

Fulfilment lane

Use this layout on settings screens where the control should remain visibly radio-like.

The shared partial can switch to a multi-column grid without changing how the field submits.

Selected label
No selection
Selected value
No selection
Selected meta
No selection
Settings
Two-column split layout with one disabled option
Behaviour
Native radios stay in the DOM, so keyboard navigation and form submission work without extra scripting.

Checkbox mode

Selectable add-ons

Exercise the shared component in checkbox mode so multiple selected values are returned together.

Delivery add-ons

Pick multiple delivery add-ons that should all be submitted together.

Checkbox mode preserves the shared visual treatment while returning an array of selected values.

Selected label
No selection
Selected value
No selection
Selected meta
No selection
Selected description
No selection

Pill choices

Color and notification variants

This section exercises compact swatch pills and card-based channel choices using the same shared component.

Brand palette

Use pills when the option set is short and should scan in one row.

Accent color

Use swatch-only radios when the color itself is the primary decision.

Color swatches keep the selection compact while still exposing a native radio input.

Radius preview

This card group now inherits the shared rounded-md shell used across radio button cards.

Use supporting copy and meta text to compare how the same radius feels across dense card content.

Primary notification channel

Card radios can also handle icon-driven choices without losing the native form semantics.

This example mixes icons, descriptions, and disabled notes in the same group.

Selected label
No selection
Selected value
No selection
Selected label
No selection
Selected value
No selection
Selected label
No selection
Selected value
No selection
Selected meta
No selection
Selected label
No selection
Selected value
No selection
Selected description
No selection

Payload inspector

Inspect serialized radio values

Each change updates the canonical payload that would be submitted to the backend.

{}