RadioButton is an extension to standard radio button element with theming.
npx volt-vue add RadioButton
import RadioButton from '@/volt/RadioButton.vue';
RadioButton is used with the v-model property for two-way value binding.
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<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(null);
</script>
RadioButtons can be generated using a list of values.
<template>
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';
const selectedCategory = ref('Production');
const categories = ref([
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
]);
</script>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<template>
<div class="card flex justify-center">
<RadioButton v-model="value" value="1" variant="filled" />
</div>
</template>
<script setup lang="ts">
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
RadioButton provides small and large sizes as alternatives to the base.
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton 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">
<RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<RadioButton 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 RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';
const size = ref(null);
</script>
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>
<div class="card flex justify-center">
<RadioButton v-model="value" value="1" :invalid="value === null" />
</div>
</template>
<script setup lang="ts">
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';
const val = ref(null);
</script>
When disabled is present, the element cannot be edited and focused.
<template>
<div class="card flex justify-center gap-2">
<RadioButton v-model="value" :value="1" disabled />
<RadioButton v-model="value" :value="2" disabled />
</div>
</template>
<script setup lang="ts">
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';
const value = ref(2);
</script>