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 different sizes. The default size is md. You can change the size of an input by setting the size property.
Show codeHide code
Inputs can have different contrasts. The default contrast is default. You can change the contrast of an input by setting the contrast property.
Show codeHide code
Inputs can have different contrasts. You can change the contrast of an input by setting the contrast property.
Show codeHide code
Inputs can have different contrasts. You can change the contrast of an input by setting the contrast 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 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 primary colored focus using the colorFocus 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 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 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 can have a material design style floating label using the labelFloat 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 and selects can be grouped with buttons using the BaseButtonGroup component.
Show codeHide code
rounded@since
2.0.0
@default
'rounded'
Show exampleHide example
size@default
'md'
Show exampleHide example
typeShow exampleHide example
labelShow exampleHide example
idShow exampleHide example
contrast@default
'default'
Show exampleHide example
classesShow exampleHide example
iconShow exampleHide example
placeholderShow exampleHide example
errorShow exampleHide example
loadingShow exampleHide example
label-floatShow exampleHide example
color-focusShow exampleHide example
#labelShow exampleHide example
#iconShow exampleHide example
#actionShow exampleHide example
el