Usage

Default

Use the v-model directive to bind the input value.

Input Types

The type prop supports various HTML5 input types.

<script setup lang="ts">
import { CLInput, CLInputTypes } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="text-input" name="text-input" :type="CLInputTypes.Text" placeholder="Text input" />
  <CLInput id="email-input" name="email-input" :type="CLInputTypes.Email" placeholder="Email input" />
  <CLInput id="password-input" name="password-input" :type="CLInputTypes.Password" placeholder="Password input" />
  <CLInput id="number-input" name="number-input" :type="CLInputTypes.Number" placeholder="Number input" />
  <CLInput id="tel-input" name="tel-input" :type="CLInputTypes.Tel" placeholder="Phone number" />
  <CLInput id="url-input" name="url-input" :type="CLInputTypes.Url" placeholder="Enter URL" />
</template>

Colors

Use the color prop to customize the component's border color.

Variants

Use the variant prop to customize the component's appearance. The input supports Outline and Ghost variants.

<script setup lang="ts">
import { CLInput, CLColors, CLColorVariants } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="outline-input" name="outline-input" :color="CLColors.Primary" :variant="CLColorVariants.Outline" placeholder="Outline variant" />
  <CLInput id="ghost-input" name="ghost-input" :color="CLColors.Primary" :variant="CLColorVariants.Ghost" placeholder="Ghost variant" />
</template>

Sizes

Use the size prop to customize the component's size.

Rounded

Use the border-radius prop to customize the border radius.

With Label

Use the label prop to add a label to the input. The required prop adds a visual indicator for required fields.

<script setup lang="ts">
import { CLInput } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="label-input" name="label-input" label="First name" placeholder="Enter your first name" />
  <CLInput id="required-input" name="required-input" label="Email address" placeholder="Enter your email" required />
</template>

Label Orientation

Use the orientation prop to position the label horizontally or vertically.

<script setup lang="ts">
import { CLInput, CLOrientation } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="vertical-input" name="vertical-input" label="First name" :orientation="CLOrientation.Vertical" placeholder="Vertical label" />
  <CLInput id="horizontal-input" name="horizontal-input" label="Last name" :orientation="CLOrientation.Horizontal" placeholder="Horizontal label" />
</template>

Prefix and Suffix

Use the prefix and suffix props to add icons or text before or after the input. These can be icon names or custom text strings.

<script setup lang="ts">
import { CLInput, CLIconNames } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="icon-prefix" name="icon-prefix" :prefix="CLIconNames.Search" placeholder="Search..." />
  <CLInput id="icon-suffix" name="icon-suffix" :suffix="CLIconNames.Check" placeholder="Valid input" />
  <CLInput id="text-prefix" name="text-prefix" prefix="https://" placeholder="example.com" />
  <CLInput id="text-suffix" name="text-suffix" suffix=".com" placeholder="domain" />
</template>

Grouped

Use the grouped prop to create a visually connected input with prefix or suffix elements.

<script setup lang="ts">
import { CLInput, CLIconNames } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="grouped-1" name="grouped-1" :prefix="CLIconNames.WorldWww" suffix=".ly" grouped placeholder="subdomain" />
  <CLInput id="grouped-2" name="grouped-2" label="Domain name" :prefix="CLIconNames.Settings" suffix=".com" grouped />
</template>

States

An input can have various states: disabled, readonly, required, and busy.

<script setup lang="ts">
import { CLInput } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="disabled-input" name="disabled-input" placeholder="Disabled input" disabled />
  <CLInput id="readonly-input" name="readonly-input" placeholder="Readonly input" readonly />
  <CLInput id="required-input" name="required-input" label="Required field" required />
  <CLInput id="busy-input" name="busy-input" placeholder="Loading..." busy />
</template>

Messages

Use the messages and messageType props to display validation messages or hints below the input.

<script setup lang="ts">
import { CLInput, CLInputTypes, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="error-input" name="error-input" :type="CLInputTypes.Email" :messages="['This is not a valid email address']" :messageType="CLColors.Danger" :color="CLColors.Danger" placeholder="invalid@" />
  <CLInput id="success-input" name="success-input" :messages="['This is a valid email address']" :messageType="CLColors.Success" :color="CLColors.Success" placeholder="[email protected]" />
  <CLInput id="warning-input" name="warning-input" :messages="['This username already exists']" :messageType="CLColors.Warning" :color="CLColors.Warning" placeholder="username" />
</template>

Multiple Messages

You can display multiple messages by passing an array of strings.

<script setup lang="ts">
import { CLInput, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput
    id="multi-msg"
    name="multi-msg"
    placeholder="Enter username"
    :messages="['A username can only contain letters and numbers', 'A username must be at minimum 3 characters long']"
    :messageType="CLColors.Warning" />
</template>

Pill

Use the pill prop to display a helpful hint or requirement below the input.

<script setup lang="ts">
import { CLInput, CLInputTypes } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="pill-input" name="pill-input" label="Password" :type="CLInputTypes.Password" pill="Min. 8 characters" required />
</template>

Character Counter

Use the charCounter prop with maxLength to display a character count.

<script setup lang="ts">
import { CLInput } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="char-counter" name="char-counter" :charCounter="true" :maxLength="25" placeholder="Max 25 characters" />
</template>

Color Picker

When using type="color", the input renders as a color picker with additional functionality.

<script setup lang="ts">
import { ref } from 'vue'
import { CLInput, CLInputTypes } from '@codeandfunction/callaloo'

const colorValue = ref('#3b82f6')
</script>

<template>
  <CLInput id="color-picker" name="color-picker" :type="CLInputTypes.Color" v-model="colorValue" />
</template>

File Upload

Use the File input type for file uploads.

<script setup lang="ts">
import { CLInput, CLInputTypes } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="file-upload" name="file-upload" :type="CLInputTypes.File" />
</template>

Fluid Width

Use the fluid prop to make the input take up 100% of its parent's width.

<script setup lang="ts">
import { CLInput } from '@codeandfunction/callaloo'
</script>

<template>
  <CLInput id="fluid-input" name="fluid-input" label="Full width input" placeholder="This input spans the full width" fluid />
</template>

Props