Radio

Pick one value from a short, visible set. Switch in this port is a segmented control — use Radio for classic radio buttons.

Bind the group with v-model or value. Switch is not an on/off toggle here; that control is Toggle.

Default

RadioGroup renders a fieldset. RadioGroupItem wraps each option in a label.

PlanHobbyProEnterprise


        
          1
          
          <RadioGroup v-model='plan' label='Plan' class='gap-3'>
        

          2
          
            <RadioGroupItem value='hobby'>Hobby</RadioGroupItem>
        

          3
          
            <RadioGroupItem value='pro'>Pro</RadioGroupItem>
        

          4
          
            <RadioGroupItem value='enterprise'>Enterprise</RadioGroupItem>
        

          5
          
          </RadioGroup>

Disabled

disabled on the group locks every option. On an item it greys out one choice.


        
          1
          
          <RadioGroup v-model='plan' label='Plan' disabled class='gap-3'>
        

          2
          
            <RadioGroupItem value='hobby'>Hobby</RadioGroupItem>
        

          3
          
            <RadioGroupItem value='pro'>Pro</RadioGroupItem>
        

          4
          
          </RadioGroup>
        

          5
          
           
        

          6
          
          <RadioGroup v-model='itemDisabled' label='Plan' class='gap-3'>
        

          7
          
            <RadioGroupItem value='hobby'>Hobby</RadioGroupItem>
        

          8
          
            <RadioGroupItem value='pro'>Pro</RadioGroupItem>
        

          9
          
            <RadioGroupItem value='enterprise' disabled>Enterprise</RadioGroupItem>
        

          10
          
          </RadioGroup>

Required

Put required on RadioGroup, not on a single item. Native constraint validation then blocks submit.


        
          1
          
          <form @submit.prevent>
        

          2
          
            <RadioGroup v-model='requiredCycle' label='Billing Cycle' required class='gap-3'>
        

          3
          
              <RadioGroupItem value='monthly'>Monthly</RadioGroupItem>
        

          4
          
              <RadioGroupItem value='yearly'>Yearly</RadioGroupItem>
        

          5
          
            </RadioGroup>
        

          6
          
            <Button size='small' type-name='submit'>Submit</Button>
        

          7
          
          </form>

Headless

useRadio returns a Radio bound to a value so you can own the label layout.

Option 1Option 2


        
          1
          
          const { component: HeadlessOne } = useRadio({ value: 'one' })
        

          2
          
           
        

          3
          
          <RadioGroup v-model="headless" class="gap-4">
        

          4
          
            <label class="flex items-center justify-between">
        

          5
          
              <span>Option 1</span>
        

          6
          
              <component :is="HeadlessOne" />
        

          7
          
            </label>
        

          8
          
          </RadioGroup>

Standalone

Bare Radio for custom rows. It needs an accessible name and you own checked state.

Option 1

Option 2


        
          1
          
          <Radio
        

          2
          
            value="one"
        

          3
          
            :checked="standalone === 'one'"
        

          4
          
            name="standalone"
        

          5
          
            aria-label="Option 1"
        

          6
          
            @change="standalone = $event"
        

          7
          
          />

Best practices

Two to six mutually exclusive choices that should stay on screen. Past that, use Select or Combobox.
On/off is Toggle. Two or three compact peers in a pill is Switch. Radio is the circular control.
Pre-select the safe default so the field looks configured. Leave it empty only when the pick has real consequences.
Group label is a Title Case noun (Deployment Region). Option labels stay parallel: Monthly / Yearly.
required belongs on RadioGroup. A single required radio is meaningless.
A disabled option needs a reason nearby. A grey circle with no copy reads as broken.
Standalone Radio always gets aria-label or a wired <label>.