<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Email:</label>
    <input :id="id" type="email" />
  </form>
</template>

<!-- Each component instance gets its own unique ID -->
<script setup>
import { useId } from 'vue'

defineProps<{ label: string }>()

const id = useId()
</script>

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <select :id="id">
      <slot />
    </select>
  </div>
</template>