input: add toggle password button automatically for type password

[ezmemoar]

For what version of Nuxt UI are you suggesting this?

v3.0.0-alpha.x

Description

I find that creating an input password with toggle button to show the text felt so verbose. How about adding a default toggle button when the input has password type since it was a good practice for accessibility?

Additional context

<!-- this is easier and shorter to write -->
<UInput type="password" />

<!-- if we want to hide, we can let slot do the work, or maybe consider adding a properties to hide it. It's more shorter -->
<UInput type="password">
   <template #trailing></template>
</UInput>

<!-- compared to what we must do now as the documentation say -->
<template>
  <UInput
    v-model="password"
    placeholder="Password"
    :type="show ? 'text' : 'password'"
    :ui="{ trailing: 'pe-1' }"
  >
    <template #trailing>
      <UButton
        color="neutral"
        variant="link"
        size="sm"
        :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
        aria-label="show ? 'Hide password' : 'Show password'"
        :aria-pressed="show"
        aria-controls="password"
        @click="show = !show"
      />
    </template>
  </UInput>
</template>

<script setup lang="ts">
const show = ref(false)
const password = ref('password')
</script>

[MickL]

Personally I think how it is in the docs is the right way. It is very explicit and fully flexible. What you want may work for your use case but then Nuxt UI needs to provide every use case possible. Yes Nuxt UI is a framework but less abstraction also gives more freedom for the dev.

[benjamincanac]

As @MickL said, this behavior is too specific for the Input component. This is why we provided an example in the docs.