CRadioButton

CRadioButton is an extension to standard radio button element with theming.

Group

CRadioButton is used with the v-model property for two-way value binding.

Cheese

Mushroom

Pepper

Onion

<template>
    <div class="card flex justify-center">
        <div class="flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="ingredient" 
                    value="Cheese"
                    inputId="ingredient1" 
                    name="pizza" 
                />
                <label for="ingredient1">Cheese</label>
            </div>
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="ingredient" 
                    value="Mushroom" 
                    inputId="ingredient2" 
                    name="pizza" 
                />
                <label for="ingredient2">Mushroom</label>
            </div>
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="ingredient" 
                    value="Pepper" 
                    inputId="ingredient3" 
                    name="pizza" 
                />
                <label for="ingredient3">Pepper</label>
            </div>
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="ingredient" 
                    value="Onion"
                    inputId="ingredient4" 
                    name="pizza" 
                />
                <label for="ingredient4">Onion</label>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';

const ingredient = ref<string>();
</script>

Filled

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<template>
  <CRadioButton 
      v-model="value" 
      value="1" 
      variant="filled" 
  />
</template>

<script setup lang="ts">
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Sizes

CRadioButton provides small and large sizes as alternatives to the base.

Small

Normal

Large

<template>
    <div class="card flex justify-center">
        <div class="flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="size" 
                    inputId="size_small" 
                    name="size" 
                    value="Small" 
                    size="small" 
                />
                <label for="size_small" class="text-sm">Small</label>
            </div>
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="size" 
                    inputId="size_normal" 
                    name="size" 
                    value="Normal" 
                />
                <label for="size_normal">Normal</label>
            </div>
            <div class="flex items-center gap-2">
                <CRadioButton 
                    v-model="size" 
                    inputId="size_large" 
                    name="size" 
                    value="Large" 
                    size="large" 
                />
                <label for="size_large" class="text-lg">Large</label>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const size = ref(null);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CRadioButton 
      v-model="value" 
      value="1" 
      :invalid="value === null" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const val = ref(null);
</script>

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
    <div class="card flex justify-center gap-2">
        <CRadioButton 
            v-model="value" 
            :value="1" 
            disabled 
        />
        <CRadioButton 
            v-model="value" 
            :value="2" 
            disabled 
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(2);
</script>