jingrow-ui/docs/components/input.md

Input

The Input component is a prettier version of <input /> with some additional features.

Usage

<template>
  <Input label="Full Name" placeholder="Jane Doe" v-model="fullName" />
  <Input label="Email" type="email" placeholder="jane@example.com" />
  <Input label="Country" type="select" :options="['India', 'Not India']" />
  <Input label="Bio" type="textarea" />
  <Input label="I have read terms and conditions" type="checkbox" />
</template>

<script setup>
import { ref } from 'vue'
import { Input } from 'jingrow-ui'
let fullName = ref('')
</script>

Props

Name	Default	Value	Description
label	null	String	Input label
type	'text'	text | number | checkbox | textarea | select | email | password | date	Type of input
placeholder	null	String	Input placeholder
inputClass	null	String | Object | Array	Classes to apply to input element and not the wrapper
iconLeft	null	FeatherIcon name	Show an icon to the left of the input
debounce	null	Number	Debounce (in ms) applied to the input event
options	null	{label, value}[] | String[]	Only applicable if type is select
disabled	false	Boolean	Disable input by setting this to true
rows	3	Number	Only applicable if type is textarea