Skip to content
On this page

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

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

Examples










Floating Label

Playground



variant
type
placeholder
floatingLabel
size
<AInput />

Props

Input component has the following props.

Prop nameTypeRequiredDefault valueDetails
disabledBooleanNofalseTo disable the input field
clearableBooleanNofalseTo clear the input.
variantStringNoprimaryDefines the color variant of the input field which has the following values:
primary, secondary, success, info, warning , danger
sizeNumberNo16Defines the size of the input field.
typeStringNotextDefines the type of input which has the following values:
text, number, email, password, search , url , date , time , range , color
placeholderStringNoTo add placeholder.
floatingLabelStringNoTo add floatingLabel.

Slots

Input component has the following slots.

Slot nameDescriptionProps
defaultContent of the input component.N/A

Events

Input component supports all native events.

Released under the MIT License.