Input base

Vunix has a component called VInputBase that is used by all VInput* components. This component provides features such as leading/trailing icons for inputs.

Leading

The leading feature allow you to add an icon or custom content before the input.

Icon with leading prop

To add an icon before the input using the InputBase component, use the leading prop. This prop allows you to inject an icon using the VIcon component.

Here's an example of how to add a search icon before the input:

<VInputText
  leading="heroicons-solid:search"
  name="inputLeadingIcon"
  placeholder="Search icon added before the input"
/>

Custom leading slot

In addition to adding an icon using the leading prop, you can also inject custom HTML into the leading slot. Here's an example of how to add custom HTML to the leading slot:

<VInputText name="inputLeadingIcon" placeholder="Search icon added before the input">
  <template #leading>
    Kg
  </template>
</VInputText>

Trailing

The trailing feature works the same as the leading feature, but adds an icon or custom content after the input.

Icon with traling prop

Here an exemple of an icon added using trailing prop. The injected icon uses the VIcon component.

<VInputText
  leading="heroicons-solid:search"
  name="inputTrailingIcon"
  placeholder="Search icon added after the input"
/>

Custom trailing slot

Here's an example of how to inject custom HTML to the trailing slot.

<VInputText name="inputTrailingIcon" placeholder="Search icon added after the input">
  <template #trailing>
    Mo
  </template>
</VInputText>

Props

Below is a list of props for the VInputBase component.