[Feature] Clearable form components

[mmpneo]

Ability to reset input field with an integrated button

Examples from quasar
https://quasar.dev/vue-components/select#clearable
https://quasar.dev/vue-components/input#clearable

[benjamincanac]

A leading and trailing slots have been added to the Button, Input, Select and SelectMenu component so you can achieve this:

<template>
  <UInput v-model="q" name="q">
    <template v-if="q" #trailing>
      <UButton
        color="gray"
        variant="link"
        icon="i-heroicons-x-mark-20-solid"
        :padded="false"
        @click="q = ''"
      />
    </template>
  </UInput>
</template>

[mcastagnetti]

As the trailing wrapper seems to have a pointer-events-none class, if we have a code similar to your example, do we have to add the pointer-events-auto class to the <UButton> or is there a better way to get the same outcome ?

[benjamincanac]

This is explained at the end of the trailing slot: https://ui.nuxtlabs.com/forms/input#trailing