Text, icon, buttons and other content can be grouped next to an input.
Volt does not come with a standalone InputGroup component. Instead, it offers a sample implementation using Tailwind as a starting point. You can either directly incorporate this into your projects or use it as a basis to develop your own customized component.
<template>
<div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-stretch w-full">
<span class="flex items-center justify-center w-10 border-y border-s border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-s-md">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" pt:root="flex-1 rounded-s-none rounded-e-md" />
</div>
<div class="flex items-stretch w-full">
<span class="flex items-center justify-center min-w-10 border-y border-s border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-s-md">
<i class="pi pi-user"></i>
</span>
<InputNumber placeholder="Price" pt:root="flex-1" inputClass="rounded-none" />
<span class="flex items-center justify-center min-w-10 border-y border-e border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-e-md"> .00 </span>
</div>
<div class="flex items-stretch w-full">
<span class="flex items-center justify-center px-2 border-y border-s border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-s-md text-sm">www</span>
<InputText placeholder="Website" pt:root="flex-1 rounded-s-none rounded-e-md" />
</div>
<div class="flex items-stretch w-full">
<InputMask mask="99/99/9999" placeholder="mm/dd/yyyy" pt:root="flex-1 rounded-e-none rounded-s-md" />
<span class="flex items-center justify-center w-10 border-y border-e border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-e-md">
<i class="pi pi-calendar"></i>
</span>
</div>
</div>
</template>
<script setup lang="ts">
import InputMask from '@/volt/InputMask.vue';
import InputNumber from '@/volt/InputNumber.vue';
import InputText from '@/volt/InputText.vue';
</script>
Buttons can be placed at either side of an input element.
<template>
<div class="card flex flex-wrap gap-4">
<div class="flex items-stretch flex-auto">
<Button label="Search" pt:root="rounded-e-none" />
<InputText placeholder="Keyword" pt:root="flex-1 rounded-s-none rounded-e-md" />
</div>
<div class="flex items-stretch flex-auto">
<InputText placeholder="Keyword" pt:root="flex-1 rounded-s-md rounded-e-none" />
<span class="flex items-center justify-center border-y border-e border-surface-300 dark:border-surface-700 rounded-e-md overflow-hidden">
<SecondaryButton icon="pi pi-search" variant="text" pt:root="rounded-none" />
</span>
</div>
<div class="flex items-stretch flex-auto">
<span class="flex items-center justify-center border-y border-s border-surface-300 dark:border-surface-700 rounded-s-md overflow-hidden">
<SecondaryButton icon="pi pi-check" severity="secondary" pt:root="rounded-none" />
</span>
<InputText placeholder="Vote" pt:root="flex-1 rounded-none" />
<span class="flex items-center justify-center border-y border-e border-surface-300 dark:border-surface-700 rounded-e-md overflow-hidden">
<SecondaryButton icon="pi pi-times" severity="secondary" pt:root="rounded-none" />
</span>
</div>
</div>
</template>
<script setup lang="ts">
import Button from '@/volt/Button.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import InputText from '@/volt/InputText.vue';
</script>
Checkbox and RadioButton components can be combined with an input element under the same group.
<template>
<div class="card flex flex-col md:flex-row gap-4">
<div class="flex items-stretch w-full">
<InputText placeholder="Price" pt:root="flex-1 rounded-e-none" />
<div class="flex items-center justify-center px-2 border-y border-e border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-e-md">
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</div>
</div>
<div class="flex items-stretch w-full">
<div class="flex items-center justify-center px-2 border-y border-s border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-s-md">
<Checkbox v-model="checked1" :binary="true" />
</div>
<InputText placeholder="Username" pt:root="flex-1 rounded-s-none" />
</div>
<div class="flex items-stretch w-full">
<div class="flex items-center justify-center px-2 border-y border-s border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-s-md">
<Checkbox v-model="checked2" :binary="true" />
</div>
<InputText placeholder="Website" pt:root="flex-1 rounded-none" />
<div class="flex items-center justify-center px-2 border-y border-e border-surface-300 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 text-surface-400 rounded-e-md">
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Checkbox from '@/volt/Checkbox.vue';
import InputText from '@/volt/InputText.vue';
import RadioButton from '@/volt/RadioButton.vue';
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(false);
const radioValue1 = ref('');
const radioValue2 = ref('');
</script>