Clerri UI

Icon Field ​

CIconField wraps an input and an icon.

Basic ​

CIconField has a default slot for you to provide a Text Input, additionally the icon property allows you to set an icon to be displayed within the field.

vue
<template>
  <CIconField :icon="PrimeIcons.SEARCH">
    <CInputText placeholder="Search..." />
  </CIconField>
</template>

Icon Position ​

You can define the position of the icon using the position property. By default, the icon is displayed on the left side of the input field.

vue
<template>
  <CIconField 
      :icon="PrimeIcons.SEARCH"
      position="right"
  >
    <CInputText placeholder="Search..." />
  </CIconField>
</template>

Size ​

You can control the size of the CIConField using the size property of the inner input component.

vue
<template>
  <CIconField :icon="PrimeIcons.SEARCH">
    <CInputText placeholder="Search..." size="small"/>
  </CIconField>
  <CIconField :icon="PrimeIcons.SEARCH">
    <CInputText placeholder="Search..." />
  </CIconField>
  <CIconField :icon="PrimeIcons.SEARCH">
    <CInputText placeholder="Search..." size="large"/>
  </CIconField>
</template>

Icon Template ​

You can also use the icon slot to provide a custom icon template.

vue
<template>
  <CIconField :icon="PrimeIcons.SEARCH">
    <template #icon>
      <i :class="PrimeIcons.HEART" class="text-red-500" />
    </template>
    <CInputText placeholder="Favorites." />
  </CIconField>
</template>