Inputs can be customized to show different shapes. The default shape is rounded. You can change the shape of all inputs by setting the shape property.
Show codeHide code
Inputs can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.
Show codeHide code
Inputs can have a material design style floating label using the labelFloat prop.
Show codeHide code
Inputs can be displayed in a smaller and more compact way using the size prop with the sm value.
Show codeHide code
Inputs can have a primary colored focus using the colorFocus prop.
Show codeHide code
Inputs can be shown in a loading state using the loading prop.
Show codeHide code
Inputs can be shown in a disabled using the disabled prop.
Show codeHide code
Inputs can be shown in an error state using the error prop. You can also set a custom error message using the same prop.
Show codeHide code
Inputs and selects can be grouped with buttons using the BaseButtonGroup component.
Show codeHide code
v-model@modifiers
`v-model="value"`
@modifiers
`v-model.number="value"`
@modifiers
`v-model.trim="value"`
Show exampleHide example
typeShow exampleHide example
sizeShow exampleHide example
iconShow exampleHide example
labelShow exampleHide example
idShow exampleHide example
shapeShow exampleHide example
errorShow exampleHide example
classesShow exampleHide example
contrastShow exampleHide example
placeholderShow exampleHide example
loadingShow exampleHide example
label-floatShow exampleHide example
color-focusShow exampleHide example
#labelShow exampleHide example
#iconShow exampleHide example
#actionShow exampleHide example
modelModifiersShow exampleHide example
el