Input
Features:
- Color
- Size
- Input File
- Value binding
Usage
vue
<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.
vue
<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.
vue
<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.
vue
<script setup>
import { Input } from 'gurunkit';
</script>
<template>
<Input type="file" />
</template>Custom Class
Add custom class using class attribute.
vue
<script setup>
import { Input } from 'gurunkit';
</script>
<template>
<Input placeholder="Input fullwidth" class="w-full" />
</template>V-Model
Bind a value using v-model.
vue
<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:
HTML Attributes and Events
HTML attributes and events are automatically inherited.
vue
<script setup>
import { Input } from 'gurunkit';
const onInput = () => alert('test');
</script>
<template>
<Input type="password" placeholder="Show Alert" @input="onInput" />
</template>API
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
color | primary, light, success, warning, error | ❌ | primary | Input color |
size | sm, md, lg | ❌ | md | Input size |
| All HTML attributes | - | ❌ | - | HTML attributes |
Events
| Name | Type | Description |
|---|---|---|
| All HTML events | - | HTML events |
Model Value
| Name | Type | Description |
|---|---|---|
default | string | Bind a value |