Radio

Radio renders a beautiful radio input. The examples on this page show how it can be used by itself, you'll get cleaner markup using it with RadioGroup.

neutral

Code Example

<Card bordered class="w-64 p-6">
  <Label class="cursor-pointer">
    <LabelText>Neutral</LabelText>
    <Radio
      v-model="basicExampleValue"
      name="radio-buttons-example"
      value="neutral"
    />
  </Label>
  <Label class="cursor-pointer">
    <LabelText>Primary</LabelText>
    <Radio
      v-model="basicExampleValue"
      primary
      name="radio-buttons-example"
      value="primary"
    />
  </Label>
  <Label class="cursor-pointer">
    <LabelText>Secondary</LabelText>
    <Radio
      v-model="basicExampleValue"
      secondary
      name="radio-buttons-example"
      value="secondary"
    />
  </Label>
  <Label class="cursor-pointer">
    <LabelText>Accent</LabelText>
    <Radio
      v-model="basicExampleValue"
      accent
      name="radio-buttons-example"
      value="accent"
    />
  </Label>
  <Label class="cursor-not-allowed">
    <LabelText>Disabled</LabelText>
    <Radio
      v-model="basicExampleValue"
      disabled
      color="disabled"
      name="radio-buttons-example"
      value="disabled"
    />
  </Label>
</Card>

Components

Radio is a standalone component, but is designed to work best with RadioGroup

Radio

Radio can be customized using the following props:

Prop	Type	Description
`model-value`	string	Controls the selected state. Use with `v-model`
`value`	string	Sets the value. `required`
`disabled`	boolean	disables the component
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Color

Use the color props to change the component color.

Selected Color

neutral

Code Example

<Radio primary value="1" />

Size

Use the size props to change the component size.

lgmdsmxs

Selected Size

Code Example

<Radio lg value="1" />

Iteration Example

This next example uses v-for on an array of colors to create Radio elements.

Selected Value

neutral

Code Example

<script setup lang="ts">
const value = ref('neutral')
const options = [
  { label: 'Neutral', color: 'neutral' },
  { label: 'Primary', color: 'primary' },
  { label: 'Secondary', color: 'secondary' },
  { label: 'Accent', color: 'accent' },
]
</script>

<template>
  <Card bordered class="w-64 p-6">
    <Label
      v-for="radioOption in options"
      :key="radioOption.color"
      class="cursor-pointer"
    >
      <LabelText>{{ radioOption.label }}</LabelText>
      <Radio
        v-model="value"
        :color="radioOption.color"
        name="test"
        :value="radioOption.color"
      />
    </Label>
  </Card>
</template>

Prev FileInput

Next RadioGroup