Useful Components Logo

Component Library

Input

Input allows user to enter specific information.

Basic input

Different variant

Input can have different variants : standard, filled, compact and outlined.

Other input type

Obviously, variants work with other type of input.

You can change the variant of these two inputs with the select below :

Floating label

Input can also have floating label

The floating label input can be used with all variants and most features of the basic input.
To provide the label to the component, you only need to provide the placeholder ! It will be use for both aspect.

Floating label with other features

Floating label also works with other features like required, disabled, invalid...