Checkbox group in Vuetify

There is already a component for a radio group from Vuetify, but if you want to handle multiple checkboxes, you're out of luck. It doesn't seem to likely, that this will change any time soon as a Github issue for it was closed by the maintainer with the reply that:

This can also now be handled with the use of <v-item-group>

I don't really like this approach, as it also comes with a lot of styling which might be in the way. The main problem with a checkbox group is that we want the same rules for all options but only want to show an error on one of them. And of course we don't want to have huge spacing between them. The solution mentioned by one in the Github issue is the following:

<v-checkbox 
  v-for="(availableWeekday, index) in availableWeekdays" 
  multiple 
  :hide-details="index !== availableWeekdays.length - 1" 
  v-model="form.fields.relevantWeekdays.value" 
  :key="availableWeekday.key" 
  :value="availableWeekday.key" 
  :label="availableWeekday.label" 
  :rules="form.fields.relevantWeekdays.rules" />

Our model is an array, that's why we need the multiple flag. With hide-details we hide the details for all but the last checkbox. This way when our rules are broken, the error message will be shown but we don't have a big gab between the checkboxes.

The list of options in Typescript looks like this:

type Weekday = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';

availableWeekdays: { key: Weekday, label: string }[] = [
  { key: 'monday', label: 'Monday' },
  { key: 'tuesday', label: 'Tuesday' },
  { key: 'wednesday', label: 'Wednesday' },
  { key: 'thursday', label: 'Thursday' },
  { key: 'friday', label: 'Friday' },
  { key: 'saturday', label: 'Saturday' },
  { key: 'sunday', label: 'Sunday' }
];