Input
Get started with a collection of inputs to start getting data from users based on multiple sizes, variants, and types.
The input field is an essential part of form elements that can be used to create interactive controls to accept data typed by users directly.
This element is a part of form-control. On this page you will find the majority of use cases from the input element.
Input Fields #
Use this example as a generic form element which includes multiple input types such as text, email, password, number, url, and phone number. Utilize TailwindCSS grid layout utility classes to add multiple columns and rows.
Input Only #
There are always cases where you want to show the text input only.
Horizontal #
Just in case you want a horizontal field. Append field--inline to the field element class.
Input Sizes #
There must be size options. Because size matters.
Helper Text #
Show additional explanation such as hint, link, etc.
Disabled & Read Only #
Follow this examples to apply the disabled/readonly option.
Valid States #
Show feedback to users, usually right after performing validation.