Skip to content
On this page


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


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

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


labelnullStringInput label
type'text'text | number | checkbox | textarea | select | email | password | dateType of input
placeholdernullStringInput placeholder
inputClassnullString | Object | ArrayClasses to apply to input element and not the wrapper
iconLeftnullFeatherIcon nameShow an icon to the left of the input
debouncenullNumberDebounce (in ms) applied to the input event
optionsnull{label, value}[] | String[]Only applicable if type is select
disabledfalseBooleanDisable input by setting this to true
rows3NumberOnly applicable if type is textarea