Tari Ibaba

Chips are used to pass on small amounts of information to users. They can be interactive and perform certain actions when clicked like buttons, or we can use them to display selected data in a select field. In this article, we’ll learn how to create and customize chips with Vuetify.

The v-chip Component

Vuetify provides the v-chip component for creating a chip.

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip>Chip Component </v-chip>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Closable Chip

We can make a chip closable by setting the close prop to true and listening for a @click:close event.

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip v-if="chip1" class="ma-2" close @click:close="chip1 = false"
        >Chip 1</v-chip
      >
      <v-chip v-if="chip2" class="ma-2" close @click:close="chip2 = false"
        >Chip 2</v-chip
      >
      <v-chip v-if="chip3" class="ma-2" close @click:close="chip3 = false"
        >Chip 3</v-chip
      >
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    chip1: true,
    chip2: true,
    chip3: true,
  }),
};
</script>

In the code above, we’ve created three closable chips. Three variables control the visibility of the chips with v-if:

Clicking the close button of a chip, say “Chip 2”, will set its visibility variable to false and hide it:

Chip Colors

Like many Vuetify components, v-chip comes with the color prop, which we can use to customize its color. We can use any color from the Material Design palette.

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip class="ma-2">Default</v-chip>
      <v-chip class="ma-2" color="green" dark>Green</v-chip>
      <v-chip class="ma-2" color="primary">Primary</v-chip>
      <v-chip class="ma-2" color="red" dark>Red</v-chip>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Draggable Chips

To make a chip draggable, set the draggable prop of the v-chip to true:

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip class="ma-2" draggable>Draggable</v-chip>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Now it can be dragged around with the mouse:

Active Chip Filters

The v-chip component comes with a filter prop that when set to true, will show an icon on the chip if the chip is active. You can make a chip active by setting its input-value prop to true:

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip class="ma-2" filter :input-value="true">Active Chip</v-chip>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

The default icon is a checkmark, but we can customize it with the filter-icon prop.

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip class="ma-2" filter :input-value="true" filter-icon="mdi-plus"
        >Active Chip</v-chip
      >
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Label Chips

Setting the label prop to true on the v-chip will change its border-radius to that of a card component (v-card):

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip class="ma-2" label>Label 1</v-chip>
      <v-chip class="ma-2" label color="yellow">Label 2</v-chip>
      <v-chip class="ma-2" label color="primary">Label 3</v-chip>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Button Chips

We can make a chip act like a button with the link prop:

<template>
  <v-app>
    <div class="d-flex justify-center align-center ma-4">
      <v-chip class="ma-2" link>
        Chip Component
      </v-chip>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Now the chip will visually respond and display a ripple when clicked.

Removing the Ripple from a Chip

Setting the ripple prop to false will remove the ripple from a chip button.

<template>
  <v-app>
    <div class="d-flex justify-center align-center ma-4">
      <v-chip class="ma-2" link :ripple="false">
        Chip Component
      </v-chip>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Now a ripple doesn’t show when the chip button is clicked:

Outlined Chips

We display the outlined variant of a chip by setting the outlined prop to true. Outlined chips inherit their border color from the current text color.

<template>
  <v-app>
    <v-row class="ma-4" justify="center">
      <v-chip class="ma-2" outlined color="green">Outlined 1</v-chip>
      <v-chip class="ma-2" outlined color="red">Outlined 2</v-chip>
      <v-chip class="ma-2" outlined color="indigo">Outlined 3</v-chip>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Custom Chip Sizes

The v-chip component comes with props for customizing its size. They are x-small, small, large, and x-large.

<template>
  <v-app>
    <div class="d-flex justify-center align-center ma-4">
      <v-chip class="ma-2" x-small> x-small chip </v-chip>
      <v-chip class="ma-2" small> small chip </v-chip>
      <v-chip class="ma-2"> Default </v-chip>
      <v-chip class="ma-2" large> large chip </v-chip>
      <v-chip class="ma-2" x-large> x-large chip </v-chip>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Chip Icons

We can display any icon from the Material Icons font library in a chip:

<template>
  <v-app>
    <div class="d-flex justify-center align-center ma-4">
      <v-chip class="ma-2" color="primary">
        Premium
        <v-icon right> mdi-star </v-icon>
      </v-chip>
      <v-chip class="ma-2" color="green accent-4" dark>
        <v-icon left> mdi-checkbox-marked-circle </v-icon>
        Confirmed
      </v-chip>
      <v-chip class="ma-2">
        <v-icon left>mdi-alarm</v-icon>
        7:00 AM
      </v-chip>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Summary

Chips are useful for conveying small pieces of information to users. Vuetify provides the v-chip component for creating a chip with various props for customization.

We use a date picker to let users select a date or a range of dates. In this article, we’re going to learn about the Vuetify date picker component and how it lets us create and customize date pickers.

The v-date-picker Component

Vuetify provides the v-date-picker component for creating date pickers.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The current date is shown by default:

We can select this current date if we want:

Or another date:

Two-way Binding with v-model

We can use v-model on the date picker component to set up a two-way binding between the picker and a variable. In the code below, we create a date picker and add some text below it to display the value of the date variable, which is the date selected on the picker.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date"></v-date-picker>
    </div>
    <div class="d-flex justify-center mt-2">Date: {{ date || 'No date' }}</div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Initially, date is null, meaning that no date has been selected. We display a text “No date” to indicate this:

Once we select a date, date is updated by the binding and the text shows it. The date is set to a string in the YYYY-MM-DD format:

Allowed Dates

We can specify allowed dates on the date picker with the allowed-dates prop. Here, we’re passing a function to it that takes the string value of the date and returns a boolean value that indicates whether the date should be allowed or not.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker
        v-model="date"
        :allowed-dates="allowedDates"
      ></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
  methods: {
    allowedDates: (val) => parseInt(val.split('-')[2], 10) % 2 === 1,
  },
};
</script>

The function we wrote will only allow a date with an odd day to be selectable on the picker:

Date Picker Colors

We can customize the color of the date picker with the color and header-color props.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date" color="green"></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

We don’t specify a header-color in the code above, so the header color will be set to the value of the color prop:

Here we do set a header-color, and the color of the date picker reflects this:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker
        v-model="date"
        color="green"
        header-color="primary"
      ></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Date Picker Elevation

We can set the elevation of a date picker with the elevation prop. The v-date-picker component supports elevation up to a maximum of 24.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date" elevation="20"></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Date Picker Icons

We can override the default icons the date picker uses with the year-icon, prev-icon and next-icon props.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker
        v-model="date"
        year-icon="mdi-calendar-blank"
        prev-icon="mdi-skip-previous"
        next-icon="mdi-skip-next"
      ></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Multiple Selection

We use the multiple prop to allow users to select multiple dates from the picker. When the multiple prop is set to true, the date picker component will expect the variable passed to its v-model to be an array.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="dates" multiple></v-date-picker>
    </div>
    <div class="d-flex justify-center">Selected: {{ dates }}</div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    dates: [],
  }),
};
</script>

picker-date Sync

We can use the .sync modifier to watch the picker-date, which is the displayed month/year (depending on the picker type and active view). In the code below, we create a date picker and text below it that displays pickerDate, a variable synced to the picker-date prop using picker-date.sync.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker
        v-model="date"
        :picker-date.sync="pickerDate"
      ></v-date-picker>
    </div>
    <div class="d-flex justify-center">Month: {{ pickerDate }}</div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
    pickerDate: null,
  }),
};
</script>

When we change the month on the date picker (using the arrows), pickerDate is updated:

Date Picker Range

Use the range prop on a date picker component to allow users select a range of dates from it. When using the range prop, v-date-picker expects the value passed to its v-model to be an array of length 2 or empty.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="dates" range></v-date-picker>
    </div>
    <div class="d-flex justify-center">Model: {{ dates }}</div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    dates: ['2022-03-05', '2022-03-15'],
  }),
};
</script>

We can select another date range if we want:

Readonly Date Picker

We can use the readonly prop to turn off interactivity with a date picker:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date" readonly></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Here’s how it looks when its readonly and you try to pick another date, say March 16:

Show Current

By default, the date picker indicates the current date with the outline of a circle:

We can remove this outline by setting the show-current prop to false:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date" :show-current="false"></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

We can also make the date picker indicate another date as the current date. We do this by setting the show-current prop to a date string in the YYYY-MM-DD format:

Showing Sibling Months

By default, days from the previous and next months are not visible. Use the show-adjacent-months prop to display them:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date" show-adjacent-months></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Customizing the Date Picker Width

We can customize the width of the date picker using the width prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker v-model="date" width="400"></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
  }),
};
</script>

Full Width

We can also use the full-width prop to make the date picker take up all the available width of its parent:

Date Picker Event Dates

We can specify events by assigning arrays, objects or functions to the events prop. And we can the event-color prop to change the default color of the mark the date picker uses to indicate the events. Here, we set events to all the odd number days in the month of March 2022 to mark them.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-date-picker
        v-model="date"
        :events="eventDates"
        event-color="green"
      ></v-date-picker>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    date: null,
    eventDates: null,
  }),
  mounted() {
    this.eventDates = [...Array(31)]
      .map((value, index) => index + 1)
      .filter((value) => value % 2 === 0)
      .map((value) => {
        const date = new Date();
        date.setDate(value);
        return date.toISOString().substr(0, 10);
      });
  },
};
</script>

Summary

We use date pickers to allow users select a date or a range of dates. Vuetify provides the v-date-picker component for creating and customizing date pickers.

A switch allows a user to choose between two distinct values.

You can use them in place of a checkbox in your UI.

In this article, we’re going to learn about the Vuetify switch component and the different ways of customizing it.

The v-switch component

v-switch is the name of the component Vuetify provides for creating a switch:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Clicking the switch turns it on:

Two-way binding with v-model

We can set up a two-way binding between the value of the switch and a variable with v-model. In the code below, we’ve created a switch and a button below it for turning it off. We added a click handler to the button that will set switch1 to false, which will turn the switch off due to the v-model. The two-way binding also ensures that toggling the switch in the user interface will update switch1.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch v-model="switch1"></v-switch>
    </div>
    <div class="d-flex justify-center mt-2">
      <v-btn color="primary" @click="switch1 = false">Turn off</v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    switch1: false,
  }),
};
</script>

Clicking the button turns off the switch:

Switch labels

We can explain the function of a switch to users with the label prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch
        v-model="switch1"
        :label="`Switch: ${switch1 ? 'on' : 'off'}`"
      ></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    switch1: false,
  }),
};
</script>

Custom HTML labels

To include HTML in the label of a switch, use the label slot:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch v-model="switch1">
        <template v-slot:label>
          Switch:
          <b :class="{ 'primary--text': switch1 }">{{
            switch1 ? 'on' : 'off'
          }}</b>
        </template>
      </v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    switch1: false,
  }),
};
</script>

Custom colors

Like many other Vuetify components, v-switch comes with the color prop which allows us to set a custom color:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="4" class="d-flex justify-center"
        ><v-switch color="red" label="red"></v-switch>
      </v-col>
      <v-col sm="4" class="d-flex justify-center"
        ><v-switch color="primary" label="primary"></v-switch>
      </v-col>
      <v-col sm="4" class="d-flex justify-center"
        ><v-switch color="green" label="green"></v-switch>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Flat switch

We can use the flat prop to remove the elevation on the thumb of a switch.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch
        v-model="switch1"
        :label="`Switch: ${switch1 ? 'on' : 'off'}`"
        flat
      ></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    switch1: false,
  }),
};
</script>

Switch in inset mode

To render a switch in inset mode, set the inset prop to true:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch
        v-model="switch1"
        :label="`Switch: ${switch1 ? 'on' : 'off'}`"
        inset
      ></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    switch1: false,
  }),
};
</script>

Pass array to v-model

We can pass a shared array variable to the v-models of multiple switch components.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      {{ people }}
    </div>

    <div class="d-flex justify-center mt-2">
      <v-switch
        v-model="people"
        color="primary"
        label="Peter"
        value="Peter"
      ></v-switch>
    </div>
    <div class="d-flex justify-center mt-2">
      <v-switch
        v-model="people"
        color="primary"
        label="Daniel"
        value="Daniel"
      ></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    people: [],
  }),
};
</script>

Toggling any one of the switches will update the array:

Disabled switch

We can use the disabled prop to disable a switch:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch label="off disabled" :value="false" disabled></v-switch>
    </div>
    <div class="d-flex justify-center mt-2">
      <v-switch label="on disabled" :value="true" disabled></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Switch in loading state

Use the loading prop to set a switch to the loading state:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-switch label="off loading" :value="false" loading="primary"></v-switch>
    </div>
    <div class="d-flex justify-center mt-2">
      <v-switch label="on loading" :value="true" loading="primary"></v-switch>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Key takeaways

Switches are useful for taking boolean input from users.

Use the v-switch component and its various props to create and customize them.

A radio button is useful when you need to obtain user input from a group of options. For example, a user can select a preferred language or country with it. In this article, we’re going to learn how to create and customize a radio button using Vuetify.

The Vuetify Radio Button Component

Use the v-radio component to create a basic radio button:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio></v-radio>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Radio Button Labels

To describe a radio button to the user, we can use the label prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio label="Radio"></v-radio>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Radio buttons are typically used with radio groups in Vuetify. We can do this by wrapping all the v-radios in a v-radio-group. We can then set up a two-way binding with the radio group component through v-model, which will allow us to access and set the currently selected radio button in the group:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup">
        <v-radio
          v-for="n in 3"
          :key="n"
          :label="`Radio ${n}`"
          :value="n"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    radioGroup: 1,
  }),
};
</script>

Clicking on another radio button in the group will update the variable and change the selection:

Radio Button Custom Colors

The radio button component has a color prop that we can use to customize its color:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup">
        <v-radio
          v-for="(color, i) in colors"
          :key="i"
          :label="color"
          :value="color"
          :color="color"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    colors: ['indigo', 'yellow', 'error', 'green', 'primary'],
  }),
};
</script>

Radio Button Directions

We can use the row prop to present the radio buttons horizontally:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" row>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The column prop will present radio buttons vertically, and is the default direction:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" column>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Ensuring a Mandatory Value

To make sure a radio group always has a value, set the mandatory prop to true:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" mandatory>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Labels with HTML

If we want to include HTML in the label of a radio group, we can put the content in the label slot of the v-radio-group:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" mandatory>
        <template v-slot:label> Pick an <strong>option</strong> </template>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

We can also include HTML in the labels of the radio buttons with their own label slots:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="selected">
        <template v-slot:label>
          Select your default <strong>search engine</strong>
        </template>
        <v-radio v-for="(url, name) in searchEngines" :key="name" :value="name"
          ><template v-slot:label
            ><a :href="url">{{ name }}</a></template
          ></v-radio
        >
      </v-radio-group>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selected: 'Google',
    searchEngines: {
      Bing: 'https://bing.com',
      Google: 'https://google.com',
      Duckduckgo: 'https://duckduckgo.com',
    },
  }),
};
</script>

Summary

We can create a group of radio buttons when we want to receive user input from a predefined set of options. Vuetify provides the v-radio component to create radio buttons and the v-radio-group component to add groupable functionality to them. These components come with various props for customization.

Sliders are a great way of getting user input from a range of values. There are used for various functions like adjusting the brightness of a display or tuning speaker volumes. In this post, we’re going to explore the various ways we can create and customize sliders with Vuetify.

The v-slider Component

Vuetify provides the v-slider component for creating sliders:

<template>
  <v-app>
    <v-row justify="center" class="mt-2">
      <v-col sm="6">
        <v-slider></v-slider>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

A basic slider consists of a track (the long line) and a thumb (the circle). Clicking somewhere on the track moves the thumb to that location:

Slider Labels

To describe our sliders to users, we can specify a label with the label prop:

<template>
  <v-app>
    <v-row justify="center" class="mt-2">
      <v-col sm="6">
        <v-slider label="Slider"></v-slider>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Slider Hints

We can show hints for a slider with the hint prop.

<template>
  <v-app>
    <v-row justify="center" class="mt-2">
      <v-col sm="6">
        <v-slider label="Slider" hint="hint"></v-slider>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The hint shows up when you click the thumb:

Two-way Binding with v-model

We can use v-model to create a two-way binding between the slider value and a variable.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider label="Slider" hint="hint" v-model="sliderValue"></v-slider>
      </v-col>
    </div>
    <div class="d-flex justify-center">
      <v-col sm="6">Slider value: {{ sliderValue }}</v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: 0,
  }),
};
</script>

In the code above, we’re adding in some text to display the current value of the slider (determined by sliderValue):

When the slider receives input sliderValue is updated and the text reflects this:

Let’s add a “Reset” button:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider label="Slider" hint="hint" v-model="sliderValue"></v-slider>
      </v-col>
    </div>
    <div class="d-flex justify-center">
      <v-col sm="6">Slider value: {{ sliderValue }}</v-col>
    </div>
    <div class="d-flex justify-center">
      <v-col sm="6"
        ><v-btn color="primary" @click="sliderValue = 0"
          >Reset slider</v-btn
        ></v-col
      >
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: 0,
  }),
};
</script>

We added a click handler to the button that sets sliderValue to 0 when it is clicked:

Slider Min and Max Values

Vuetify sliders have default min and max values of 0 and 100 respectively. We can change them to something else with the min and max props:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider
          label="Slider"
          hint="hint"
          v-model="sliderValue"
          min="20"
          max="60"
        ></v-slider>
      </v-col>
    </div>
    <div class="d-flex justify-center">
      <v-col sm="6">Slider value: {{ sliderValue }}</v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: null,
  }),
};
</script>

Now the minimum value of the slider is 20:

And the maximum value is now 60:

Slider Custom Colors

v-slider comes with props that allow us to modify the colors of its various elements.

Use the color prop to change the color of the part of the track before the thumb:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider label="color" v-model="sliderValue" color="green"></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: 0,
  }),
};
</script>

The track-color prop will modify the color of the part of the track after the thumb:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider
          label="track-color"
          v-model="sliderValue"
          track-color="red"
        ></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: 0,
  }),
};
</script>

To change the color of the thumb, use the thumb-color prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider
          label="thumb-color"
          v-model="sliderValue"
          thumb-color="orange"
          thumb-label="always"
        ></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: 0,
  }),
};
</script>

Disabled Sliders

Set the disabled prop to true to turn off interactivity with the slider:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider disabled value="50" label="Disabled"></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Discrete Sliders

By default Vuetify sliders have a step value of 1. These type of sliders are called continuous sliders because the thumb moves smoothly from its min to max value. In cases where we need less precision we can increase this step value, with the step prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-10">
      <v-col sm="6">
        <v-slider
          v-model="sliderValue"
          step="10"
          thumb-label="always"
        ></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    sliderValue: 0,
  }),
};
</script>

Slider Icons

v-slider provides props to display icons along with the slider, useful for adding more context.

The prepend-icon prop will display the accompanying icon before the slider:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider v-model="volume" prepend-icon="mdi-volume-high"></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    volume: 0,
  }),
};
</script>

The append-icon will show the icon after the slider:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider v-model="volume" append-icon="mdi-volume-high"></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    volume: 0,
  }),
};
</script>

Readonly Sliders

Readonly sliders also prevent interactivity like disable sliders, but they don’t lose their color:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider readonly value="30" label="Readonly"></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Inverse Labels

To display the slider label at the end of the slider, use the inverse-label prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider label="Inverse label" inverse-label></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Slider Thumbs

v-slider offers certain props for customizing the behaviour and display of the thumb. Set the thumb-label prop to true to display to only display the thumb label when the slider is being used:

<template>
  <v-app>
    <div class="d-flex justify-center mt-10">
      <v-col sm="6">
        <v-slider v-model="value" label="Slider" thumb-label></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

To always show the thumb label whether the user is using the slider or not, set the thumb-label prop to always:

<template>
  <v-app>
    <div class="d-flex justify-center mt-10">
      <v-col sm="6">
        <v-slider v-model="value" label="Slider" thumb-label="always"></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

Custom Thumb Sizes

The thumb-size prop lets us modify the thumb size:

<template>
  <v-app>
    <div class="d-flex justify-center mt-16">
      <v-col sm="6">
        <v-slider
          v-model="value"
          label="Slider"
          thumb-label="always"
          thumb-size="50"
        ></v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

Custom Thumb Labels

The thumb normally displays the current numeric value of the slider, but we change what it shows by providing an element to the thumb-label slot of v-slider:

<template>
  <v-app>
    <div class="d-flex justify-center mt-16">
      <v-col sm="6">
        <v-slider
          v-model="value"
          label="Volume"
          thumb-label="always"
          thumb-size="50"
        >
          <template v-slot:thumb-label>
            <v-icon dark>mdi-volume-high</v-icon>
          </template>
        </v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

Slider Ticks

Ticks visually represent the values the user can move the slider to. Setting the ticks prop to true will show the slider only when the slider is being used:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider v-model="value" step="10" ticks> </v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

Set ticks to always to make the ticks display all the time:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider v-model="value" step="10" ticks="always"> </v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

Custom Tick Sizes

We can also customize the tick size, with the tick-size prop:

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="6">
        <v-slider v-model="value" step="10" ticks="always" tick-size="4">
        </v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
  }),
};
</script>

Tick Labels

We can add text to describe the ticks. To do this, set the tick-labels prop to an array of strings.

<template>
  <v-app>
    <div class="d-flex justify-center mt-2">
      <v-col sm="12">
        <v-slider
          v-model="value"
          step="10"
          ticks="always"
          :tick-labels="tickLabels"
        >
        </v-slider>
      </v-col>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 0,
    tickLabels: ['Terrible!', 'Bad', 'Okay', 'Good', 'Excellent!'],
  }),
};
</script>

Each item of the array will be assigned to a tick:

Summary

Vuetify provides the v-slider component to create sliders. We can use its props to customize various aspects of its behaviour and appearance.

Space is a fundamental element of visual design and is important in every user interface. When building web apps, we usually space out elements from one another by modifying their paddings and margins. Vuetify provides spacing helper classes for adjusting the padding and margin of elements without having to create new classes. We’re going to learn how to use them in this post.

All the Vuetify helper classes are of the following format: {property}{direction}-{size}.

property

The property specifies the type of spacing to apply to the element. There are two possible values:

• m – applies a margin.
• p – applies padding.

direction

The direction indicates the margin or padding direction to apply the spacing. There are nine available directions in Vuetify:

• t – applies the spacing for the margin-top or padding-top CSS properties of the element.
• b – applies the spacing for margin-bottom or padding-bottom.
• l – applies the spacing for margin-left or padding-left.
• r – applies the spacing for margin-right or padding-right.
• s – When Vuetify is in the default LTR mode, s acts similar to l. But in RTL mode, it behaves like r.
• e – When Vuetify is in the default LTR mode, e acts similar to r. But in RTL mode, it behaves like l.
• x – applies the spacing for both *-left and *-right.
• y – applies the spacing for both *-top and *-bottom.
• a – applies the spacing for the property in all four directions.

size

The size sets the actual value of the spacing in pixels. A size 0 will remove the margin or padding from the element in the specified direction. To get the number of pixels for positive values, simply multiply the size number by 4px. Vuetify provides 16 possible positive spacing values:

• 1 – sets the margin or padding to 4px.
• 2 – sets the margin or padding to 8px.
• 3 – sets the margin or padding to 12px.
• 4 – sets the margin or padding to 16px.
• 5 – sets the margin or padding to 20px.
• 6 – sets the margin or padding to 24px.
• 7 – sets the margin or padding to 28px.
• 8 – sets the margin or padding to 32px.
• 9 – sets the margin or padding to 36px.
• 10 – sets the margin or padding to 40px.
• 11 – sets the margin or padding to 44px.
• 12 – sets the margin or padding to 48px.
• 13 – sets the margin or padding to 52px.
• 14 – sets the margin or padding to 56px.
• 15 – sets the margin or padding to 60px.
• 16 – sets the margin or padding to 64px.

We can specify negative spacing values by prefixing the number with an n. To get the number of pixels for negative values, multiply the size by -4px. Negative spacing values only apply to margins, and there are also 16 of them in Vuetify:

• n1 – sets the margin to -4px.
• n2 – sets the margin to -8px.
• n3 – set the margin to -12px.
• n4 – sets the margin to -16px.
• n5 – sets the margin to -20px.
• n6 – sets the margin to -24px.
• n7 – sets the margin to -28px.
• n8 – sets the margin to -32px.
• n9 – sets the margin to -36px.
• n10 – sets the margin to -40px.
• n11 – sets the margin to -44px.
• n12 – sets the margin to -48px.
• n13 – sets the margin to -52px.
• n14 – sets the margin to -56px.
• n15 – sets the margin to -60px.
• n16 – sets the margin to -64px.

Apart from the above available spacing values, we also have the auto spacing, which sets margins or paddings of elements to the auto value.

Examples

Now that we know the Vuetify spacing helper classes, let’s see how to use them in practice.

<template>
  <v-app>
    <v-row>
      <v-col sm="6"> <v-card color="blue" dark>JavaScript</v-card> </v-col>
      <v-col sm="6"> <v-card color="green" dark>PHP</v-card></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Here we’ve created two cards and customized their colors:

Let’s add the mt-2 class to the v-row element containing the cards:

<template>
  <v-app>
    <v-row class="mt-2">
      <v-col sm="6"> <v-card color="blue" dark>JavaScript</v-card> </v-col>
      <v-col sm="6"> <v-card color="green" dark>PHP</v-card></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

If you understood everything we covered previously, you’ll know that the mt-2 class will set the top margin of the v-row to 8px. When you run this code, you’ll see that there’s now some spacing between the two cards and the top of the page:

With the mx-3 class we’ll also create left and right margins (of 12px):

<template>
  <v-app>
    <v-row class="mt-2 mx-3">
      <v-col sm="6"> <v-card color="blue" dark>JavaScript</v-card> </v-col>
      <v-col sm="6"> <v-card color="green" dark>PHP</v-card></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

And then, we’ll use the pa-4 and pa-6 classes to add paddings of different sizes to the two cards:

<template>
  <v-app>
    <v-row class="mt-2 mx-3">
      <v-col sm="6">
        <v-card color="blue" dark class="pa-4">JavaScript</v-card>
      </v-col>
      <v-col sm="6">
        <v-card color="green" dark class="pa-6">PHP</v-card></v-col
      >
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Here’s another example. We have two buttons, whose colors we’ve set to green and red:

<template>
  <v-app>
    <v-col>
      <v-btn color="green" dark>Okay</v-btn>
      <v-btn color="red" dark>Cancel</v-btn></v-col
    >
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

The py-10 class will add a bottom and top padding of 40px to the green button:

<template>
  <v-app>
    <v-col>
      <v-btn color="green" class="py-10" dark>Okay</v-btn>
      <v-btn color="red" dark>Cancel</v-btn></v-col
    >
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

To space out the buttons, we’ll add a left margin to the Cancel button with the ml-5 class:

<template>
  <v-app>
    <v-col>
      <v-btn color="green" class="py-10" dark>Okay</v-btn>
      <v-btn color="red" dark class="ml-5">Cancel</v-btn></v-col
    >
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

We’ll also pad it horizontally with the px-16 class:

<template>
  <v-app>
    <v-col>
      <v-btn color="green" class="py-10" dark>Okay</v-btn>
      <v-btn color="red" dark class="ml-5 px-16">Cancel</v-btn></v-col
    >
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Let’s add a negative right margin to the Okay button to remove the spacing we added:

<template>
  <v-app>
    <v-col>
      <v-btn color="green" class="py-10 mr-n5" dark>Okay</v-btn>
      <v-btn color="red" dark class="ml-5 px-16">Cancel</v-btn></v-col
    >
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Conclusion

Vuetify provides spacing helper classes to allow us to space out and pad our UI elements without using custom classes or inline CSS. These classes can alter the margins or paddings of the elements in different directions and to various sizes.

Dropdown lists are useful for getting user input from a known group of options, e.g., selecting a country among all the countries in the world, or choosing the hour of the day for an alarm. There are also known as select fields. In this article, we’re going to learn how use the Vuetify Select component to start creating dropdown lists in our apps.

The v-select Component

Vuetify provides the v-select component for creating select fields:

<template>
  <v-app>
    <v-row justify="center">
      <v-col sm="6"><v-select></v-select></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Select Field Labels

We can describe a dropdown list with the label prop of v-select. We are going to be display a list of colors, so let’s label it “Color”:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"><v-select label="Color"></v-select></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Select Field Items

There are not options to select from in the dropdown list yet. Here’s what shows up when you click it:

We can add items by assigning an array to the items prop. The items will be a group of colors.

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select label="Color" :items="items"></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Now there are options in the dropdown list.

We can now choose one of the options:

Vuetify Select Set Default Value

To set a default value for a dropdown list, we can use v-model to create a two-way binding between the current value of the dropdown list and a variable. The initial value of this variable will be the default value of the select field:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select
          label="Color"
          :items="items"
          v-model="defaultSelection"
        ></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    defaultSelection: 'Yellow',
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Vuetify Select Field Filled Variant

We can set an alternative filled variant for a select field with the filled prop:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select label="Color" :items="items" filled></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Vuetify Select Field Outlined Variant

We can also use an alternative outlined style, by setting the outlined prop of v-select to true:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select label="Color" :items="items" outlined></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Vuetify Select Field Solo Variant

We can use the solo variant with the solo prop:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select label="Color" :items="items" solo></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Dense Select Fields

Setting the dense prop to true on a v-select will compact the dropdown list:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select label="Color" :items="items" outlined dense></v-select
      ></v-col>
      <v-col sm="6"
        ><v-select label="Color" :items="items" solo dense></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Disabled Select Fields

To prevent interactivity with a select field, use the disabled prop:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select label="Color" :items="items" disabled></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Select Field Icons

The prepend-icon prop allows us to prepend an icon to a dropdown list. Here we’re displaying a palette icon to represent color:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select
          label="Color"
          :items="items"
          prepend-icon="mdi-palette"
        ></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Similarly, we can use the append-icon prop to append an icon to a select field:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select
          label="Color"
          :items="items"
          append-icon="mdi-palette"
        ></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Multi Select Dropdown Lists in Vuetify

In instances where we want users to be able to select more than one option, we can use the multiple prop

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select
          label="Color"
          :items="items"

          multiple
        ></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Displaying Chips in Multi Select Dropdown Lists

We can display the options as a group of chips instead of comma-separated values. We do this with the chips prop:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select
          label="Color"
          :items="items"

          multiple
          chips
        ></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Customizing Select Field Menu Props

We can customize certain properties of the menu that pops up when the dropdown list is clicked. Modifiable properties include top, bottom, offsetX and offsetY.

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col sm="6"
        ><v-select
          label="Color"
          :items="items"
          :menu-props="{ offsetX: true }"
        ></v-select
      ></v-col>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

Summary

Dropdown lists come in handy when we want to provide a finite list of known options to the user to choose from. Vuetify provides the v-select component to create and customize them in diverse ways.

A table is a great way of presenting structured information in an easily understandable format. In this post, we’re going to learn how to use the Vuetify data table component, which is used for displaying tabular data and comes with useful features such as sorting, searching, pagination, and more.

The Vuetify Data Table Component (v-data-table)

Vuetify provides the v-data-table component for creating data tables. The headers prop of this component is an array of objects used to configure the data table headers. Each object in this array has a text property, which determines the header name that shows up for a particular column. We also pass an array of objects (desserts) to the items prop. Each object in desserts corresponds to a row in the data table, and each property represents a table cell for that row. The property names of these objects have to match one of the value property values of the objects in the headers array, i.e. (a key name must be one of name, calories, fat, carbs, protein, and iron).

We use the items-per-page property to paginate the data table. Here we set it to 5, so we have 2 pages for the 10 desserts.

<template>
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    };
  },
};
</script>

And here’s our table:

Vuetify Data Table Dense

Setting the dense prop makes a data table more compact, as the name implies:

<template>
  <v-app>
    <v-data-table
      dense
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</template>
<script>
export default {
  data: () => ({
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
    ],
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' },
    ],
  }),
};
</script>

Vuetify Data Table Search Features

We can filter data on the data table with the search prop. Here, we’re binding whatever value entered in the text field with the input used for searching the table:

<template>
  <v-app>
    <v-card>
      <v-card-title>
        Nutrition
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="desserts"
        :search="search"
        :items-per-page="5"
      ></v-data-table>
    </v-card>
  </v-app>
</template>
<script>
export default {
  data: () => ({
    search: '',
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
    ],
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' },
    ],
  }),
};
</script>

Vuetify Data Table Custom Filters

We can specify our custom filter function by passing a method to the custom-filter prop that has the signature (value: any, search: string | null, item: any) => boolean.

<template>
  <v-app>
    <div>
      <v-data-table
        :headers="headers"
        :items="desserts"
        item-key="name"
        class="elevation-1"
        :search="search"
        :custom-filter="filterOnlyCapsText"
        :items-per-page="5"
      >
        <template v-slot:top>
          <v-text-field
            v-model="search"
            label="Search (UPPER CASE ONLY)"
            class="mx-4"
          ></v-text-field>
        </template>
      </v-data-table>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      search: '',
      calories: '',
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    };
  },
  computed: {
    headers() {
      return [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories',
        },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ];
    },
  },
  methods: {
    filterOnlyCapsText(value, search, item) {
      return (
        value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLocaleUpperCase().indexOf(search) !== -1
      );
    },
  },
};
</script>

We can also customize the filtering of a specific column by supplying a function to the filter property on an item in the array passed to the headers prop. In the code example below, we add a text field below the rows of the data table (with the body.append slot) which can be used to display all the desserts with calories less than a certain value.

<template>
  <v-app>
    <div>
      <v-data-table
        :headers="headers"
        :items="desserts"
        item-key="name"
        class="elevation-1"
        :search="search"
        :custom-filter="filterOnlyCapsText"
        :items-per-page="5"
      >
        <template v-slot:top>
          <v-text-field
            v-model="search"
            label="Search (UPPER CASE ONLY)"
            class="mx-4"
          ></v-text-field>
        </template>
        <template v-slot:body.append>
          <tr>
            <td></td>
            <td>
              <v-text-field
                v-model="calories"
                type="number"
                label="Less than"
              ></v-text-field>
            </td>
            <td colspan="4"></td>
          </tr>
        </template>
      </v-data-table>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      search: '',
      calories: '',
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    };
  },
  computed: {
    headers() {
      return [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories',
          filter: (value) => {
            return this.calories ? value < parseInt(this.calories) : true;
          },
        },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ];
    },
  },
  methods: {
    filterOnlyCapsText(value, search, item) {
      return (
        value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLocaleUpperCase().indexOf(search) !== -1
      );
    },
  },
};
</script>

Vuetify Data Table Filterable

We can prevent specific columns from being included when searching through the table rows by setting the filterable property to false on the element of the array passed to headers that is associated with the column. In the code example below, we’ve turned off searching for the dessert name column:

<template>
  <v-app>
    <v-card class="ma-4">
      <v-card-title>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="desserts"
        :search="search"
        :items-per-page="5"
      ></v-data-table>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      search: '',
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          filterable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    };
  },
};
</script>

Footer Props

By default, the data table component displays a default footer using the v-data-footer component. We can pass props to this component with the footer-props prop of v-data-table:

<template>
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      item-key="name"
      class="elevation-1 ma-4"
      :footer-props="{
        showFirstLastPage: true,
        firstIcon: 'mdi-arrow-collapse-left',
        lastIcon: 'mdi-arrow-collapse-right',
        prevIcon: 'mdi-minus',
        nextIcon: 'mdi-plus',
      }"
    ></v-data-table>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          value: 'name',
        },
        { text: 'Category', value: 'category' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          category: 'Ice cream',
        },
        {
          name: 'Ice cream sandwich',
          category: 'Ice cream',
        },
        {
          name: 'Eclair',
          category: 'Cookie',
        },
        {
          name: 'Cupcake',
          category: 'Pastry',
        },
        {
          name: 'Gingerbread',
          category: 'Cookie',
        },
        {
          name: 'Jelly bean',
          category: 'Candy',
        },
        {
          name: 'Lollipop',
          category: 'Candy',
        },
        {
          name: 'Honeycomb',
          category: 'Toffee',
        },
        {
          name: 'Donut',
          category: 'Pastry',
        },
        {
          name: 'KitKat',
          category: 'Candy',
        },
      ],
    };
  },
};
</script>

Conclusion

The Vuetify data table component (v-data-table) comes in handy for laying out data in a digestible format. We can not only display data but perform searching and other operations. It also allows UI customizations like making the table more compact and functional customizations such as specifying a custom filter function.

A checkbox allows a user to select between two values. They are useful for getting boolean input (true or false), perhaps checking off a task in a to-do list app to show completion or deciding whether or not to accept a license agreement during software installation. In this article, we’re going to learn how to create a checkbox in Vuetify.

The v-checkbox Component

Vuetify provides the v-checkbox component for creating a checkbox:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-checkbox></v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Clicking the checkbox will toggle its checked state:

Setting a Checkbox value

Use the value prop to set the checked state of the checkbox.

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-checkbox :value="true"></v-checkbox>
      <v-checkbox :value="false"></v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Checkbox Labels

We can label a Vuetify checkbox with the label prop:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-checkbox v-model="checked" label="Coding Beauty"></v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    checked: false,
  }),
};
</script>

Vuetify Checkbox Label Slot

To include HTML content in a checkbox label, we can put it in the label slot:

<template>
  <v-app>
    <v-row class="ma-2" justify="space-around">
      <v-checkbox color="indigo" input-value="true">
        <template v-slot:label>
          Visit the&nbsp;
          <a
            target="_blank"
            href="https://codingbeautydev.com"
            @click.stop
            v-on="on"
          >
            Coding Beauty website
          </a>
        </template>
      </v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Vuetify Checkbox Boolean v-model

To control the current value of the checkbox, we can use v-model to create a two-way binding between the v-checkbox and a boolean variable.

Here, we create a checkbox and a button below it to toggle the state of the checkbox. We indicate this state with some text in the label prop.

<template>
  <v-app>
    <div class="ma-2 d-flex justify-center">
      <v-checkbox v-model="checked" :label="`Checked: ${checked}`"></v-checkbox>
    </div>
    <div class="ma-2 d-flex justify-center">
      <v-btn color="indigo" dark @click="checked = !checked">{{
        checked ? 'Uncheck' : 'Check'
      }}</v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    checked: false,
  }),
};
</script>

Clicking the button will negate checked, and this will reflect on the checkbox and its label:

Vuetify Checkbox Array v-model

We can pass an array to v-model to allow multiple checkbox components to share the same variable used for the two-way binding:

<template>
  <v-app>
    <v-container fluid>
      <p>Selected: {{ selected }}</p>
      <v-checkbox
        v-model="selected"
        label="JavaScript"
        value="javascript"
      ></v-checkbox>
      <v-checkbox
        v-model="selected"
        label="TypeScript"
        value="typescript"
      ></v-checkbox>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selected: [],
  }),
};
</script>

Customizing Checkbox Color in Vuetify

The color prop allows us to set the color of the checkbox background when checked:

<template>
  <v-app>
    <v-row justify="space-around" class="ma-4">
      <v-checkbox color="primary" label="primary"></v-checkbox>
      <v-checkbox color="green" label="green"></v-checkbox>
      <v-checkbox color="yellow darken-3" label="yellow darken-3"></v-checkbox>
      <v-checkbox color="red" label="red"></v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Disabled Checkbox

We can turn off checkbox interactivity with the disabled prop. It will no longer accept input when disabled.

<template>
  <v-app>
    <v-row class="ma-2" justify="space-around">
      <v-checkbox
        label="on disabled"
        color="green"
        input-value="true"
        disabled
      ></v-checkbox>
      <v-checkbox
        label="off disabled"
        color="green"
        disabled
      ></v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Indeterminate Checkbox

We can make the checkbox indeterminate by using the indeterminate prop on the v-checkbox:

<template>
  <v-app>
    <v-row class="ma-2" justify="space-around">
      <v-checkbox label="indeterminate" color="red" indeterminate></v-checkbox>
    </v-row>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Summary

We can use a checkbox when we need to accept boolean input. Vuetify provides the v-checkbox component to create it and provides various props for customization.