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.

Inputs can have different sizes. The default size is md. You can change the size of an input by setting the size property.

Inputs can have different contrasts. The default contrast is default. You can change the contrast of an input by setting the contrast property.

Inputs can have different contrasts. You can change the contrast of an input by setting the contrast property.

Inputs can have different contrasts. You can change the contrast of an input by setting the contrast property.

Inputs can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.

Inputs can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.

Inputs can have a primary colored focus using the colorFocus prop.

Inputs can be shown in an error state using the error prop. You can also set a custom error message using the same prop.

Inputs can be shown in an error state using the error prop. You can also set a custom error message using the same prop.

Inputs can be shown in an error state using the error prop. You can also set a custom error message using the same prop.

Inputs can have a material design style floating label using the labelFloat prop.

Inputs can be shown in a loading state using the loading prop.

Inputs can be shown in a disabled using the disabled prop.

Inputs and selects can be grouped with buttons using the BaseButtonGroup component.