Hacktron Design System

RadioGroup

A set of options where the user can pick only one.

Select this option

Select this option

Select this option

<template>  <RadioGroup :items="[{ value: 'a', label: 'Default', description: 'Select this option' }]" model-value="a" /></template>

Props

Name Type Default
items{ value: string; label?: string; description?: string; disabled?: boolean }[]-
modelValuestring-

Guidelines

Do

  • Use this when the user must pick exactly one option from a short, fully-visible list - all options should be visible at once, not hidden behind a dropdown.
  • Give every item a description when the label alone doesn't fully explain the choice.

Don't

  • Don't use this for a list long enough to need scrolling - use a select/dropdown instead.
  • Don't use this for a toggle that isn't mutually exclusive - use Checkbox for independent on/off choices.