IconField

1<script setup lang="ts">2import { IconField, InputIcon, InputText, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const query = ref('');6const email = ref('');7</script>8 9<template>10    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>11        <StackPanel spacing="0.375rem" style="min-width: 16rem">12            <Label for="if-search">Search</Label>13            <IconField>14                <InputIcon icon="search" />15                <InputText id="if-search" v-model="query" placeholder="Search" />16            </IconField>17        </StackPanel>18        <StackPanel spacing="0.375rem" style="min-width: 16rem">19            <Label for="if-email">Email</Label>20            <IconField>21                <InputText id="if-email" v-model="email" type="email" />22                <InputIcon icon="user" />23            </IconField>24        </StackPanel>25    </StackPanel>26</template>

1<script setup lang="ts">2import { IconField, InputIcon, InputText, Label, StackPanel } from '@vitral/vue';3</script>4 5<template>6    <StackPanel spacing="0.375rem" style="min-width: 16rem">7        <Label for="if-both">Username</Label>8        <IconField fluid>9            <InputIcon icon="user" />10            <InputText id="if-both" invalid />11            <InputIcon icon="warning" label="Invalid" style="color: var(--vt-danger-color)" />12        </IconField>13    </StackPanel>14</template>

1<script setup lang="ts">2import { IconField, InputIcon, InputNumber, InputPassword } from '@vitral/vue';3import { ref } from 'vue';4 5const amount = ref<number | null>(120);6</script>7 8<template>9    <IconField>10        <InputIcon icon="calendar" />11        <InputNumber v-model="amount" aria-label="Days" />12    </IconField>13    <IconField>14        <InputIcon icon="spinner" spin />15        <InputPassword aria-label="Password" :feedback="false" />16    </IconField>17</template>