Input Field

The AInput component extend the standard input element which has various types such as text, number, email, password, search, url, tel, date, time, range and color with the support of various styles, states and size.

Import

import { AInput } from 'ayovue'
import 'ayovue/themes/default/input.css'

Examples

Floating Label

Playground

---

disabled

clearable

variant

primarysecondarysuccessinfowarningdanger

type

textnumberemailpasswordsearchurlteldatetimerangecolor

placeholder

floatingLabel

size

<AInput />

Props

Input component has the following props.

Prop name	Type	Required	Default value	Details
disabled	Boolean	No	false	To disable the input field
clearable	Boolean	No	false	To clear the input.
variant	String	No	primary	Defines the color variant of the input field which has the following values: primary, secondary, success, info, warning , danger
size	Number	No	16	Defines the size of the input field.
type	String	No	text	Defines the type of input which has the following values: text, number, email, password, search , url , date , time , range , color
placeholder	String	No		To add placeholder.
floatingLabel	String	No		To add floatingLabel.

Slots

Input component has the following slots.

Slot name	Description	Props
default	Content of the input component.	N/A

Events

Input component supports all native events.