Volt has launched 🚀

IconField

IconField displays an icon inside an input field.

Basic #

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>

Custom Icon #

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>

Sizes #

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>