FloatLabel

1<script setup lang="ts">2import { FloatLabel, InputText } from '@vitral/vue';3import { ref } from 'vue';4 5const over = ref('');6const inside = ref('');7const on = ref('Ada');8</script>9 10<template>11    <FloatLabel>12        <InputText id="fl-over" v-model="over" placeholder=" " />13        <label for="fl-over">Over</label>14    </FloatLabel>15    <FloatLabel variant="in">16        <InputText id="fl-in" v-model="inside" placeholder=" " />17        <label for="fl-in">In</label>18    </FloatLabel>19    <FloatLabel variant="on">20        <InputText id="fl-on" v-model="on" placeholder=" " />21        <label for="fl-on">On</label>22    </FloatLabel>23</template>

1<script setup lang="ts">2import { FloatLabel, Select } from '@vitral/vue';3import { ref } from 'vue';4 5const city = ref<string | null>(null);6const cities = ['Lisbon', 'Porto', 'São Paulo', 'Rio de Janeiro'];7</script>8 9<template>10    <FloatLabel :filled="city != null" style="min-width: 14rem">11        <Select v-model="city" :options="cities" id="fl-city" fluid />12        <label for="fl-city">City</label>13    </FloatLabel>14</template>

1<script setup lang="ts">2import { IftaLabel, InputText } from '@vitral/vue';3import { ref } from 'vue';4 5const email = ref('');6const wrong = ref('not-an-email');7</script>8 9<template>10    <IftaLabel>11        <InputText id="ifta-email" v-model="email" placeholder="you@example.com" />12        <label for="ifta-email">Email</label>13    </IftaLabel>14    <IftaLabel invalid>15        <InputText id="ifta-wrong" v-model="wrong" invalid />16        <label for="ifta-wrong">Email</label>17    </IftaLabel>18</template>