FormInput Component

The FormInput component is built with Vue 3 and provides a customizable input field with support for icons, prefixes, and various size variants. It's designed to be flexible and easy to integrate into your forms.

Basic Usage

Import and use FormInput in your Vue components as follows:

<template>
  <FormInput v-model="input1" placeholder="Enter text..." />
</template>

<script setup>
import { FormInput } from '@robuust-digital/vue-components/core';
</script>

Props

The FormInput component accepts the following props:

Prop	Type	Default	Description
modelValue	String, Number	undefined	The input value
prefixIcon	Object, Function	null	Specifies an icon to display on the left side of the input. @heroicons/vue can be used, or you can import your own .svg files.
icon	Object, Function	null	Specifies an icon to display on the right side of the input
rootClass	String	''	Additional classes for the root div
size	String	'base'	Input size variant ('sm' or 'base')

Slots

The FormInput component provides several slots for customization:

Input Slot

The input slot allows you to customize the input element:

Show code

<template>
  <FormInput v-model="input2">
    <template #input="attrs">
      <input v-bind="attrs" placeholder="Custom input..." />
    </template>
  </FormInput>
</template>

Prefix Slot

You can add content before the input using the prefix slot:

€

Show code

<template>
  <FormInput v-model="input3" root-class="w-fit" class="text-right" placeholder="0,00">
    <template #prefix>
      <span>€</span>
    </template>
  </FormInput>
</template>

Suffix Slot

You can add content after the input using the suffix slot:

m²

Show code

<template>
  <FormInput v-model="input3" root-class="w-fit" placeholder="0">
    <template #suffix>
      <span>m²</span>
    </template>
  </FormInput>
</template>

Icon Slots

You can customize both left and right icons using the prefixIcon and icon slots:

Show code

<template>
  <FormInput v-model="input3">
    <template #prefixIcon>
      <BeakerIcon />
    </template>
    <template #icon>
      <BeakerIcon />
    </template>
  </FormInput>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/16/solid';
</script>

Examples

Pre-filled Value

Show code

<template>
  <FormInput v-model="input4" />
</template>

<script setup>
const input4 = ref('Default value');
</script>

With Left Icon

Show code

<template>
  <FormInput :icon="BeakerIcon" placeholder="Search..." />
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/16/solid';
</script>

Small Size Variant

Show code

<template>
  <FormInput size="sm" placeholder="Small input..." />
</template>

Refs

The FormInput component's native HTML <input> element can be accessed using a template ref combined with a ref. This allows you to call native input methods or set properties directly:

<template>
  <FormInput ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const inputRef = ref();

onMounted(() => {
  // Access the native input element
  const nativeInput = inputRef.value.$refs.input.$el;
  
  // Use native input properties and methods
  nativeInput.focus(); // Focus the input
});
</script>

CSS Customization ⚡️

To customize the input styles global

:root {
  /* Available variables */
  --rvc-input-border-radius: var(--rvc-base-border-radius);
  --rvc-input-border-width: var(--rvc-base-border-width);
  --rvc-input-border-color: var(--rvc-base-border-color);
  --rvc-input-font-size: var(--rvc-base-input-font-size);
  --rvc-input-font-weight: var(--rvc-base-input-font-weight);
  --rvc-input-box-shadow: var(--rvc-base-box-shadow);
  --rvc-input-color: var(--rvc-base-input-color);
  --rvc-input-bg-color: var(--rvc-base-input-bg-color);
  --rvc-input-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
  --rvc-input-disabled-opacity: var(--rvc-base-input-disabled-opacity);
  --rvc-input-icon-size: var(--rvc-base-input-icon-size);
  --rvc-input-icon-color: var(--rvc-base-input-icon-color);
  --rvc-input-padding-x: var(--rvc-base-input-padding-x);
  --rvc-input-height: var(--rvc-base-input-height);
  --rvc-input-placeholder-color: var(--rvc-base-input-placeholder-color);

  /* Small variant */
  --rvc-input-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
  --rvc-input-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
  --rvc-input-icon-size-sm: calc(var(--rvc-base-input-icon-size) * 0.85);
  --rvc-input-height-sm: 1.875rem;
}