Basic Usage

Apple

Banana

Peach

Grapes

Current value:

<script setup>
import { ref } from 'vue'
const val = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <c-radio
      v-model="val"
      label="Apple"
      value="Apple"
    />
    <c-radio
      v-model="val"
      label="Banana"
      value="Banana"
    />
    <c-radio
      v-model="val"
      label="Peach"
      value="Peach"
    />
    <c-radio
      v-model="val"
      label="Grapes"
      value="Grape"
    />
  </div>
  <div class="c-mt-md">
    Current value: {{ val }}
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Sizes

xs

sm

md (default)

lg

xl

Current value:

<script setup>
import { ref } from 'vue'
const val = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <c-radio
      v-model="val"
      label="xs"
      value="xs"
      size="xs"
    />
    <c-radio
      v-model="val"
      label="sm"
      value="sm"
      size="sm"
    />
    <c-radio
      v-model="val"
      label="md (default)"
      value="md"
    />
    <c-radio
      v-model="val"
      label="lg"
      value="lg"
      size="lg"
    />
    <c-radio
      v-model="val"
      label="xl"
      value="xl"
      size="xl"
    />
  </div>
  <div class="c-mt-md">
    Current value: {{ val }}
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Status

Disabled

Disabled

<script setup>
import { ref } from 'vue'
const val1 = ref(false)
const val2 = ref(true)
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <c-radio
      v-model="val1"
      label="Disabled"
      disabled
    />
    <c-radio
      v-model="val2"
      label="Disabled"
      disabled
    />
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

RadioGroup

Current value: Apple

Apple

Banana

Peach

Grapes

<script setup>
import { ref } from 'vue'

const selectedFruit = ref('Apple')
const fruits = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Banana', value: 'Banana' },
  { label: 'Peach', value: 'Peach' },
  { label: 'Grapes', value: 'Grape' },
]
</script>

<template>
  Current value: {{ selectedFruit }}
  <c-radio-group
    v-model="selectedFruit"
    :options="fruits"
  />
</template>

Click to open/fold code

Open Vue Repl Editor

CRadio API

Props

Events

modelValue

CRadioModel

*

Current value. Can be used with v-model.

value

CRadioModel

Default  true

The value used for selected.

label

string | number

Default  ''

The label text.

size

CSize

Default  'md'

The size

disabled

boolean

Default  false

Determine whether the radio is disabled or not.

CRadioGroup API

Props

Events

modelValue

boolean | string | number

*

Current value. Used with v-model.

options

Array<{ value: string | number; label: string }>

*

The options array.

size

CSize

Default  'md'

The size.

gutterSize

CSize

Default  'md'

The gutter size between each radio.