A password field you can look at.
Import it from rei-kit:
import { PasswordInput } from 'rei-kit'
Open PasswordInput in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { PasswordInput } from 'rei-kit'
const password = ref('')
</script>
<template>
<PasswordInput
v-model="password"
label="Password"
toggle-label="Show password"
hint="At least 12 characters."
autocomplete="new-password"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
modelValue | string | '' | The value, with `v-model`. |
label | string | yes | |
toggleLabel | string | yes | The toggle's name, e.g. "Show password". It does not change: the control is pressed while the password is visible, and that state is what a screen reader reads out. |
error | string | '' | |
hint | string | '' | |
labelHidden | boolean | false | |
fieldId | string | undefined | The input's `id`, for an `ErrorSummary` that links to this field. |
size | 'sm' | 'md' | 'md' | |
controlClass | string | undefined | Classes for the control itself, rather than for the field around it. `class` lands on the field, because that is where Vue puts a component's class and because a layout class means "space this field". That leaves `variant="unstyled"` with no way to paint the control it just stripped — the point of stripping it — which is why an app with a large amount field wrote the whole thing by hand instead. It appends, so with the default variant a conflict is settled by Tailwind's own order rather than by writing it here; reach for it with `unstyled`, where there is nothing to settle. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.