QRadio

QRadio buttons allow users to select a single option from a set. They're commonly used for exclusive selections where only one option can be chosen at a time.

Radio buttons with the same selected binding and name form a group. This keeps their value, keyboard navigation, and native form behavior in sync.

Radio buttons can be disabled using the disabled prop. Disabled radio buttons cannot be interacted with and display with a muted appearance to indicate they're unavailable.

QRadio supports Svelte's two-way binding with the bind:selected directive. This makes it easy to track and update the selected value in your component's state.

Keep the radio as the only action, or make the whole item selectable when a larger target suits the interface.

You can generate radio buttons dynamically from an array of options using Svelte's each block. This is useful when working with data-driven forms or when the options might change.

QRadio components support standard event handlers like onchange. This allows you to perform actions when the selection changes.

Give each group a shared name and an accessible label. Tab enters or leaves the group. Arrow keys move focus and immediately select the new option; Space selects the focused option, while Enter has no native radio action.