Vuetify — Radio Buttons and Switches
By: John Au-Yeung
Tags: Programming, Web Development, JavaScript, Software Development, Technology

Photo by Eric Nopanen on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Radio Buttons

We can add radio buttons with the v-radio component.

For example, we can write:

<template>

<v-container>

<v-row>

<v-col col="12">

<p>{{ radios }}</p>

<v-radio-group v-model="radios" :mandatory="false">

<v-radio label="Radio 1" value="radio-1"></v-radio>

<v-radio label="Radio 2" value="radio-2"></v-radio>

</v-radio-group>

</v-col>

</v-row>

</v-container>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

radios: '',

}),

};

</script>

Setting the mandatory prop to false makes it optional.

Radios Buttons Direction

Radio buttons can be in a row or in a column.

For instance, we can write:

<template>

<v-container>

<v-row>

<v-col col="12">

<p>{{ radios }}</p>

<v-radio-group v-model="radios" column>

<v-radio label="Radio 1" value="radio-1"></v-radio>

<v-radio label="Radio 2" value="radio-2"></v-radio>

</v-radio-group>

</v-col>

</v-row>

</v-container>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

radios: "",

}),

};

</script>

to display the radio buttons in a column.

We can make them display in a row with a row prop:

<template>

<v-container>

<v-row>

<v-col col="12">

<p>{{ radios }}</p>

<v-radio-group v-model="radios" row>

<v-radio label="Radio 1" value="radio-1"></v-radio>

<v-radio label="Radio 2" value="radio-2"></v-radio>

</v-radio-group>

</v-col>

</v-row>

</v-container>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

radios: "",

}),

};

</script>

Radios Button Colors

The colors of radio buttons can be changed with the color prop:

<template>

<v-container>

<v-row>

<v-col col="12">

<p>{{ radios }}</p>

<v-radio-group v-model="radios">

<v-radio label="Radio 1" value="radio-1" color="red"></v-radio>

<v-radio label="Radio 2" value="radio-2" color="red"></v-radio>

</v-radio-group>

</v-col>

</v-row>

</v-container>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

radios: "",

}),

};

</script>

We change the radio button color with the color prop on each button.

Switches

We can add switches with the v-switch component.

For example, we can write:

<template>

<v-container>

<v-row>

<v-col col="12">

<v-container fluid>

<v-switch v-model="sw" :label="`Switch: ${sw.toString()}`"></v-switch>

</v-container>

</v-col>

</v-row>

</v-container>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

sw: false,

}),

};

</script>

We have the v-switch with v-model binding to a boolean state.

Switches Array

We can have multiple switches that bind to the same variable.

For example, we write:

<template>

<v-container>

<v-row>

<v-col col="12">

<v-container fluid>

<p>{{ people }}</p>

<v-switch v-model="people" label="james" value="james"></v-switch>

<v-switch v-model="people" label="mary" value="mary"></v-switch>

</v-container>

</v-col>

</v-row>

</v-container>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

people: [],

}),

};

</script>

We have the value prop which will be added to the people array if we check it.

Conclusion

Vuetify provides us with radio buttons and switches.

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!