Forms

Tailwind CSS Input

The Tailwind CSS Input is a custom component designed to enable styled form inputs.

Default Input

A basic example of Tailwind CSS Input with a placeholder label.

Label

Display a Tailwind CSS Input with an associated form input label element for better accessibility and user experience.

Required

Display a Tailwind CSS Input with a required field indicator to enhance accessibility and user experience.

Hint

Include hint text below a Tailwind CSS Input for an additional guidance or context for the input field.
Hint text goes here

Icon

Use KeenIcons to integrate icons into Tailwind CSS Input, providing an intuitive form experience.

Tooltip

Utilize the Tailwind CSS Tooltip to integrate hint text into Tailwind CSS Input, providing a well-guided form experience.
Hey, a delightful tooltip is here!

Validation

Utilize Tailwind CSS Input validation states based on the form validation status to enhance user feedback and overall form usability.

Disabled

Use the disabled attribute of the Tailwind CSS Input to indicate non-interactivity.

Sizes - Default

Use the .input-sm and .input-lg custom classes to adjust the size of Tailwind CSS Input fields, providing flexibility for different design requirements.

Sizes - With Icon

Use the .input-sm and .input-lg custom classes to adjust the size of Tailwind CSS Input fields with icons, providing flexibility for different design requirements.

Source Code

The following source file manages the CSS styles of the Tailwind CSS Input component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/css/styles.css bundle, making it available globally across all pages.
File Description
src/core/plugins/components/input.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Input component.