---
url: /cookbook/custom-input-type-example.md
description: >-
  Build a custom WPCE radio-button input type as a Vue component using the
  composition API and useInputType composable.
---

# Custom Input Type Example

Here's a custom [input type](/documentation/concepts/input-types) component that works as a fully compatible drop-in replacement for the `select` input type, but using radio buttons instead.

Say, this is our `RadioInput.vue` component:

```vue
<script setup>
import { ref, computed, useId } from 'vue'

const model = defineModel({ required: true })
const { property } = window.wpce.inputTypeUtils.useInputType()

const name = computed(() => `wpce-radio-${useId()}`)
</script>

<template>
  <label v-for="{ value, label } of property.input.options">
    <input type="radio" v-bind="{ name, value }" v-model="model" />
    {{ label }}
  </label>
</template>

<style scoped>
label {
  display: block;

  input {
    width: auto !important;
  }
}
</style>
```

Then, we can register the component with some meta data attached:

```js
import RadioInput from './RadioInput.vue'

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  editor.registerInputType('radio', RadioInput, {
    // Use the first option as default
    getDefaultValue({ property }) {
      return property.input.options[0].value
    },

    // There is no invalid state for radio inputs
    validate() {
      return true
    },

    // Declare that this input types supports two conditions
    conditions: {
      isEmpty: (value, payload) => (value == null) === (payload ?? true),
      equals: (value, payload) => value === payload,
    },
  })
})
```