Usage

RadioList is a convenience wrapper around RadioGroup. It accepts an options array and renders a group of radio buttons automatically.

<script setup lang="ts">
import { RadioList } from '@astryx-vue/core/Radio'
import { shallowRef } from 'vue'

const plan = shallowRef('team')
const options = [
  { value: 'free', label: 'Free', description: 'For personal projects.' },
  { value: 'team', label: 'Team', description: 'For small teams.' },
  { value: 'enterprise', label: 'Enterprise', description: 'For organizations.' },
]
</script>

<template>
  <RadioList v-model="plan" label="Plan" :options="options" />
</template>

Best practices

Guidance	Practices
Do	Keep the number of options small: typically 2 to 7 choices.
Do	Use clear, concise labels that differentiate each option at a glance.
Don't	Use when multiple selections are needed; use CheckboxList instead.
Don't	Use for long lists; use Selector for better discoverability.
Don't	Use horizontal layout with more than 4 options; it wraps awkwardly.
Don't	Wrap a disabled RadioList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.

Examples

Basic

Plan

FreeFor personal projects.TeamFor small teams.EnterpriseFor organizations.

Pass an options array to render a list with descriptions.

Keyboard and accessibility

RadioList hands rendering to RadioGroup internally, so keyboard interactions and the ARIA structure are identical to RadioGroup — there is nothing new to learn when you move between the two.

• The group renders as a single role="radiogroup" container, which screen readers announce as a set of radio options.
• An ID is generated automatically for each option, so you never need to specify one yourself.
• A group label is required: it is the accessible name of the whole group, and screen readers use it to say what the options are choosing between.

Usage notes

Prefer RadioList when the options are simple and do not need a custom layout: it only needs an options array to render the whole group.

Use RadioGroup with Radio children when you need custom option rendering or a more complex layout.