Fieldset

<script setup lang="ts">
import { ref } from 'vue'
import { VFieldset, VRadio } from 'vectis-ui'

const plan = ref('free')
</script>

<template>
  <VFieldset legend="Plan" hint="You can change it at any time.">
    <VRadio v-model="plan" name="plan" value="free" label="Free" />
    <VRadio v-model="plan" name="plan" value="pro" label="Pro" />
    <VRadio v-model="plan" name="plan" value="team" label="Team" />
  </VFieldset>
</template>

<script setup lang="ts">
import { VCheckbox, VFieldset } from 'vectis-ui'
</script>

<template>
  <VFieldset legend="Notifications" orientation="horizontal">
    <VCheckbox label="Email" />
    <VCheckbox label="Text message" />
    <VCheckbox label="Push" />
  </VFieldset>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VFieldset, VRadio } from 'vectis-ui'

const plan = ref<string>()
const error = ref<string>()

function submit() {
  error.value = plan.value ? undefined : 'Choose a plan to continue.'
}

function pick(value: string) {
  plan.value = value
  error.value = undefined
}
</script>

<template>
  <div class="demo">
    <VFieldset v-slot="{ invalid, required }" legend="Plan" :error="error" required>
      <VRadio
        v-for="value in ['Free', 'Pro', 'Team']"
        :key="value"
        :model-value="plan"
        name="plan"
        :value="value"
        :label="value"
        :invalid="invalid"
        :required="required"
        @update:model-value="pick(value)"
      />
    </VFieldset>
    <VButton @click="submit">Continue</VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

<script setup lang="ts">
import { VCheckbox, VFieldset } from 'vectis-ui'
</script>

<template>
  <VFieldset legend="Notifications" hide-legend orientation="horizontal">
    <VCheckbox label="Email" />
    <VCheckbox label="Text message" />
  </VFieldset>
</template>