InputGroup

1<script setup lang="ts">2import { InputGroup, InputGroupAddon, InputNumber, InputText } from '@vitral/vue';3import { ref } from 'vue';4 5const user = ref('');6const price = ref<number | null>(120);7const site = ref('');8</script>9 10<template>11    <InputGroup style="max-width: 20rem">12        <InputGroupAddon>@</InputGroupAddon>13        <InputText v-model="user" aria-label="Username" placeholder="Username" />14    </InputGroup>15    <InputGroup style="max-width: 20rem">16        <InputGroupAddon>$</InputGroupAddon>17        <InputNumber v-model="price" aria-label="Price" />18        <InputGroupAddon>.00</InputGroupAddon>19    </InputGroup>20    <InputGroup style="max-width: 24rem">21        <InputGroupAddon>https://</InputGroupAddon>22        <InputText v-model="site" aria-label="Website" placeholder="example.com" />23    </InputGroup>24</template>

1<script setup lang="ts">2import { Button, InputGroup, InputText } from '@vitral/vue';3import { ref } from 'vue';4 5const query = ref('');6</script>7 8<template>9    <InputGroup style="max-width: 24rem">10        <InputText v-model="query" aria-label="Search" placeholder="Keyword" />11        <Button label="Search" icon="search" />12    </InputGroup>13</template>

1<script setup lang="ts">2import { InputGroup, InputGroupAddon, InputNumber } from '@vitral/vue';3import { ref } from 'vue';4 5const from = ref<number | null>(10);6const to = ref<number | null>(90);7</script>8 9<template>10    <InputGroup label="Price range" style="max-width: 24rem">11        <InputNumber v-model="from" aria-label="From" />12        <InputGroupAddon>to</InputGroupAddon>13        <InputNumber v-model="to" aria-label="To" />14    </InputGroup>15</template>