Label

1<script setup lang="ts">2import { InputText, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const name = ref('');6</script>7 8<template>9    <StackPanel spacing="0.375rem" style="min-width: 16rem">10        <Label for="label-name" required>Full name</Label>11        <InputText id="label-name" v-model="name" required aria-required="true" />12    </StackPanel>13</template>

1<script setup lang="ts">2import { Checkbox, InputText, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const agree = ref(false);6</script>7 8<template>9    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>10        <div style="display: flex; align-items: center; gap: 0.5rem">11            <Checkbox id="label-agree" v-model="agree" binary />12            <Label for="label-agree">I agree to the terms</Label>13        </div>14        <StackPanel spacing="0.375rem" style="min-width: 16rem">15            <Label for="label-off">Disabled field</Label>16            <InputText id="label-off" disabled />17        </StackPanel>18    </StackPanel>19</template>

1<script setup lang="ts">2import { Label, Rating, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const stars = ref<number | null>(null);6</script>7 8<template>9    <StackPanel spacing="0.375rem" style="min-width: 16rem">10        <Label id="label-rating" size="large">How was it?</Label>11        <Rating v-model="stars" aria-labelledby="label-rating" />12    </StackPanel>13</template>