IconField displays an icon inside an input field.
Volt does not come with a standalone IconField 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 flex flex-wrap justify-center gap-4">
<div class="relative">
<i class="pi pi-search absolute top-1/2 -mt-2 text-surface-400 leading-none start-3 z-1" />
<InputText placeholder="Search" pt:root="ps-10" />
</div>
<div class="relative">
<i class="pi pi-calendar absolute top-1/2 -mt-2 text-surface-400 leading-none start-3 z-1" />
<InputMask placeholder="mm/dd/yyyy" mask="99/99/99" slotChar="mm/dd/yyyy" pt:root="ps-10" />
</div>
<div class="relative">
<i class="pi pi-shopping-cart absolute top-1/2 -mt-2 text-surface-400 leading-none start-3 z-1" />
<InputNumber inputClass="ps-10" placeholder="Add Items" />
<i class="pi pi-arrow-right absolute top-1/2 -mt-2 text-surface-400 leading-none end-3 z-1" />
</div>
<div class="relative">
<InputText placeholder="Loading..." disabled pt:root="pe-10" />
<i class="pi pi-spin pi-spinner absolute top-1/2 -mt-2 text-surface-400 leading-none end-3 z-1" />
</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>
IconField can support any content such as SVGs.
<template>
<div class="card flex justify-center">
<div class="relative">
<svg width="14" height="16" viewBox="0 0 35 40" fill="none" class="absolute top-1/2 -mt-2 text-surface-400 leading-none start-3 z-1" xmlns="http://www.w3.org/2000/svg">
...
</svg>
<InputText placeholder="Volt" pt:root="ps-10" />
</div>
</div>
</template>
<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
</script>
Different size options for the input and the icon.
<template>
<div class="card flex flex-col items-center gap-4">
<div class="relative">
<i class="pi pi-search absolute top-1/2 -mt-2 text-surface-400 leading-none start-3 z-1" />
<InputText placeholder="Small" pt:root="p-small:ps-10" size="small" />
</div>
<div class="relative">
<InputText placeholder="Normal" pt:root="pe-10" />
<i class="pi pi-user absolute top-1/2 -mt-2 text-surface-400 leading-none end-3 z-1" />
</div>
<div class="relative">
<i class="pi pi-lock absolute top-1/2 -mt-2 text-surface-400 leading-none start-3 z-1" />
<InputText placeholder="Large" pt:root="p-large:ps-10" size="large " />
</div>
</div>
</template>
<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
</script>