ឯកសា > Component

Tailwind CSS Floating Label

Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes


Floating label example

et started with the following three styles for the floating label component and use it.

Validation

Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.

Well done! Some success message.

Well done! Some success message.

Well done! Some success message.

Oh, snapp! Some error message.

Oh, snapp! Some error message.

Oh, snapp! Some error message.

Sizes

Use the small and default sizes of the floating label input fields from the following example.