Compound component with passing props

[LadIQe]

Hi, I hope I used right term in title, if not, Im sorry.

My question is: lets say, I have FieldWrapper component. This component has some props (like ID for "for" label, label text, hint, required, disabled, etc). So basically its simple wrapper around actual input. Because it doesnt care about what kind of input you use, you dont need to create component for every input, selector, checkbox, etc. You just wrap them.

So basic implementation is like this (just example)

// FieldWrapper

<script setup lang="ts">
defineProps<{
  id: string,
  required?: boolean
}>()
</script>

<template>
  <div class="some-class">
    <label :for="id">{{ label }}</label>

   <slot /> // some input

    <span v-if="hint">{{ hint }}</span>
  </div>
</template>

And you will use it like this

<FieldWrapper id="name" required>
  <input type="text" />
</FieldWrapper>

What should FieldWrapper internally do:

• it should take some props like ID, required, disabled, etc and apply them to input

Is it possible to create it using script setup or I need to use defineComponent with return () => ... ??

Thanks

[jh-leong]

You can solve this using scoped slots: Playground