Radio

Display a radio input element.

Usage

      <script lang="ts" setup>
const selected = ref(false)
</script>

<template>
  <CRadio
    v-model="selected"
    label="Example radio option"
  />
</template>

Description

Add an extra long description here underneath the label.

      <template>
  <CRadio description="Add an extra long description here underneath the label." label="Example radio option" />
</template>

Required

      <template>
  <CRadio required label="Example radio option" />
</template>

Disabled

      <template>
  <CRadio disabled label="Example radio option" />
</template>

Value

      <template>
  <CRadio value="123" label="Example radio option" />
</template>

Props

Prop Default Type
id string
modelValue string | number | false | true
value string | number | false | true
label string
disabledboolean
description string
requiredboolean
variant'subtle' "outlined" | "subtle"