AFieldset.vue

<template>
  <component :is="as" class="tw-shadow tw-p-6 tw-rounded tw-m-0">
    <template v-if="title">
      <component
        :is="as === 'fieldset' ? 'legend' : 'h2'"
        class="tw-text-xl tw-font-bold -tw-mt-2 tw-m-0 tw-mb-3"
        :class="{ 'tw-float-left tw-w-full': as === 'fieldset' }"
        >{{ title }}</component
      >
      <div v-if="as === 'fieldset'" class="tw-clear-left" role="presentation" />
    </template>

    <slot />
  </component>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    title?: string
    as?: string
  }>(),
  {
    as: 'fieldset',
    title: '',
  },
)
</script>