Input

Features:

• Color
• Size
• Input File
• Textarea
• Currency
• Value binding
• Debounce input

Usage

<script setup>
import { Input } from 'gurunkit';
</script>

<template>
  <Input placeholder="Input placeholder" />
</template>

Color

Set input color using color props. Supported values: primary, light, error, warning, success.

It's also supports dark mode, enable it by adding dark class to html tag.

<script setup>
import { Input } from 'gurunkit';
</script>

<template>
  <Input color="primary" placeholder="Primary" />
  <Input color="warning" placeholder="Warning" />
  <Input color="error" placeholder="Error" />
  <Input color="light" placeholder="Light" />
  <Input color="success" placeholder="Success" />
</template>

Size

Set input size using size props. Supported values: sm, md, lg.

<script setup>
import { Input } from 'gurunkit';
</script>

<template>
  <Input size="sm" placeholder="Small" />
  <Input size="md" placeholder="Medium" />
  <Input size="lg" placeholder="Large" />
</template>

Input File

Set input file using type props with file value.

<script setup>
import { Input } from 'gurunkit';
</script>

<template>
  <Input type="file" />
</template>

Textarea

Set textarea using tag props with textarea value.

<script setup>
import { Input } from 'gurunkit';
</script>

<template>
  <Input tag="textarea" rows="5" placeholder="Textarea" />
</template>

Custom Class

Add custom class using class attribute.

<script setup>
import { Input } from 'gurunkit';
</script>

<template>
  <Input placeholder="Input fullwidth" class="w-full" />
</template>

V-Model

Bind a value using v-model.

<script setup>
import { Input } from 'gurunkit';
import { ref } from 'vue';

const name = ref('');
</script>

<template>
  <Input placeholder="Enter your name" v-model="name" />
</template>

Your name:

Input Currency

Auto formats and parses value as currency when currency prop is true.

<script setup>
import { Input } from 'gurunkit';
import { ref } from 'vue';

const price = ref('50000');
</script>

<template>
  <Input placeholder="Enter your price" currency v-model="price" />
</template>

Your price: 50000

Debounce Input

The debounced input is emitted through the input-debounce event after 300ms.

<script setup>
import { Input } from 'gurunkit';

const onSearch = () => alert('searching');
</script>

<template>
  <Input
    placeholder="Search something"
    type="search"
    @input-debounce="onSearch"
  />
</template>

HTML Attributes and Events

HTML attributes and events are automatically inherited.

<script setup>
import { Input } from 'gurunkit';

const onInput = () => alert('test');
</script>

<template>
  <Input type="text" placeholder="Show Alert" @input="onInput" />
  <Input type="text" disabled placeholder="Disabled Input" />
</template>

API

Props

Name	Type	Required	Default	Description
color	primary, light, success, warning, error	❌	primary	Input color
size	sm, md, lg	❌	md	Input size
currency	boolean	❌	false	Formats and parses value as currency
All HTML attributes	-	❌	-	HTML attributes

Events

Name	Type	Description
input-debounce	-	Debounced input
All HTML events	-	HTML events

Model Value

Name	Type	Description
default	string	Bind a value