vuetifyjs
feat(VOtpInput): add a bool property masked to show the text or not
resolves #18964
Description
As mentioned in the issue, I have added a masked attribute that can be used with text and number type to mask the input.
Markup:
<template>
<v-app>
<v-container>
<!-- -->
<v-otp-input v-model="otp" type="text" masked />
{{ otp }}
</v-container>
</v-app>
</template>
<script>
import { ref } from 'vue';
import { VOtpInput } from '../src/components/VOtpInput/index.ts'
export default {
name: 'Playground',
components: {
VOtpInput,
},
setup () {
const otp = ref('')
return {
otp,
//
}
},
}
</script>
Usually this is done by the user via the type prop, switching between password/text|number. This does make it easier but for such a simple component, I'm not sure it's worth inflating it's API.
Usually this is done by the user via the type prop, switching between password/text|number. This does make it easier but for such a simple component, I'm not sure it's worth inflating it's API.
Thanks for the feedback! As mentioned in the issue, I’ve added a masked attribute that works with both text and number types to mask the input. My intention was to provide flexibility while keeping the API simple, but I understand your concern about potentially overcomplicating it.
Can you let me know if you’re suggesting a different approach for handling this, or if you'd prefer a simpler method to manage input types and masking? I’m open to suggestions!
Maybe instead of a prop we can provide an example in the docs that shows how the user can do it? With masking coming back to the framework soon, I don't want to introduce any potentially confusing API .