Custom Toggle Button Vue Component

This blog post aims to create a simple Toggle-Button component with Vue3, which can also be integrated with a form, via v-model.

Sometimes it is important to create these UI components on your own, instead of relying on heavier UI libraries. When you do this, you get to learn a few more intricate stuff, which you may ignore while using ready-made solutions, and also, you make it light-weight by excluding features you may not even need.

The ToggleButton Component

Props:

• options (array)
• modelValue (string)

defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  options: {
    type: Array as PropType<KeyValue<string>[]>,
    required: true
  }
})

Emits:

• update:model-value (string)

defineEmits<{
  (e: 'update:model-value', value: string): void
}>()

Let's talk about the props.
The options array is a list of key-value objects, which are displayed as buttons.

<template v-for="option of options" :key="option.value">
  <button
    type="button"
    :class="{ selected: modelValue === option.value }"
    @click="$emit('update:model-value', option.value)"
  >
    {{ option.label }}
  </button>
</template>

The modelValue prop is an interesting one. It should be named modelValue (case-sensitive), if you want this component to have a data-binding. When a custom component has this prop, and it is bound to a v-model, the value flows into this component and is applied to the underlying model.

If you want the component to have a 2-way data-binding, you also need to define an emit called update:model-value (again, case-sensitive). You write your logic to emit this event with the new value, every time a new button is clicked.

...
@click="$emit('update:model-value', option.value)"
...

Now that your component is ready for 2-way binding, you can use it in your application:

<ToggleButton :options="options" v-model="selected" />
...
const options = [
  {
    label: 'Male',
    value: 'M'
  },
  {
    label: 'Female',
    value: 'F'
  },
  {
    label: 'Diverse',
    value: 'D'
  }
] satisfies KeyValue<string>[]

const selected = ref<string>('F')

That's all folks. Refer to the GitHub repo for the complete code!

Anirban Mukherjee