On this page
Input
The Input component is a prettier version of <input /> with some additional features.
Usage
vue
<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 'frappe-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 |