jio-input-code

Props

Prop name	Description	Type	Values	Default
id		string	-
label	Label of the input, visible to screen readers.	string	-
placeholder	Placeholder of the input, visible to screen readers.	string	-
description	Description of the input, visible to screen readers.	string	-
disabled	Whether the input is disabled.	boolean	-
valid	Whether the input is valid. Requires is-valid & is-invalid classes to be defined.	boolean	-

---

View on Gitlab

General

This component is used for verification codes.

View design in Figma

Code examples

<!-- parent composition --> <script setup lang="ts"> import { ref, computed } from "vue"; const digits = ref("12345"); const digitsValid = computed(() => digits.value.length === 6); const digitsDisabled = ref(false); </script> <template> <a @click="digitsDisabled = !digitsDisabled"> Toggle Disabled</a> <jio-input-code :disabled="digitsDisabled" v-model="digits" label="Benaming van het veld" placeholder="Placeholder tekst voor het veld" description="Uitgebreide beschrijving van het veld" :valid="digitsValid" /> </template>