Tailwind css select input

Tailwind CSS Inputs

Use responsive inputs component with helper examples for number input, phone number, password, text input, disabled & more. Free download, open-source license.

Required ES init: Input *

* UMD autoinits are enabled by default. This means that you don’t need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

Basic example

Forms is the most commonly used to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks like collects user data and serves as the display or user interface within the system.

Form components help you to define the type of widget that is required to enter data and automatically adds a property to the resource endpoint to interact with the form component.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Hey there 👋 we want to make Tailwind Elements a community-driven project. It’s open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Sizing

Use the following utility classes to create three different sizing options (large, base, and small) for form input elements.

   
 Form control lg 
  
 Default input 
  
 Form control sm 
  

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Disabled

Add the disabled boolean attribute on an input with bg-neutral-100 classes to give it a neutraled out appearance and remove pointer events and make it unusable and un-clickable.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Readonly

Use the following example to make the input readonly, so that you cannot edit the input.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Text

Input types let you specified what data users should provide and help you validate it.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Email

The input type=»email» defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Password

The input type=»password» defines a password field thus hiding characters as sensitive information.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Number

The input type=»number» defines field for entering a number.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Phone number

The input type=»tel» defines a field for entering a telephone number.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

URL

The input type=»url» defines a field for entering a URL.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Textarea

The textarea tag defines a multi-line text input control.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Helper text

Helper text conveys additional guidance about the input field, such as how it will be used.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Character counter

Add an empty form helper element, set data-te-input-showcounter=»true» for input and set the maxlength attribute to create a counter.

 // Initialization for ES Users import < Input, initTE, >from "tw-elements"; initTE(< Input >); 

Floating label

Wrap a pair of input and label elements with .relative class and add classes as below to enable floating labels text-based form fields.

   
 Email address 
  
 Password 
  

Related resources

Tutorials:

Extended Docs:

datepicker file input form templates input group login form registration form search select textarea timepicker border opacity borders center grid items dark theme display flex icons position spacing

Design System (Figma):

introduction art of prioritization de emphasize with no mercy lowering contrast beyond borders let it breathe user experience do not start with the roof secondary questions project personality design system principles tips and tricks

Inputs — API

Import

Importing components depends on how your application works. If you intend to use the Tailwind Elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

 import < Input, initTE >from "tw-elements"; initTE(< Input >); 

Via data attributes

Elements with the data-te-input-wrapper-init attribute will be automatically initialized — you can set all available options with data attributes. For ES format, you must first import and call the initTE method.

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the Input class — it allows making use of all the public methods listed in the Methods section.

 const myInput = new Input( document.getElementById("myInput") ); 

 const myInput = new te.Input( document.getElementById("myInput") ); 

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-input , as in data-te-input-form-white=»true» .

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-te-class , as in data-te-class-notch=»group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none bg-red-600″

Name	Default	Description
counter	text-right leading-[1.6]	Sets text alignment and line height of input counter wrapper.
notch	group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none	Sets position and size of notches wrapper.
notchLeading	pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-r-0 rounded-l-[0.25rem] group-data-[te-input-focused]:border-r-0 group-data-[te-input-state-active]:border-r-0	Sets main styles of the leading notch.
notchLeadingNormal	border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary	Sets border and shadow of the default leading notch.
notchLeadingWhite	border-neutral-200 group-data-[te-input-focused]:shadow-[-1px_0_0_#ffffff,_0_1px_0_0_#ffffff,_0_-1px_0_0_#ffffff] group-data-[te-input-focused]:border-white	Sets border and shadow of the form white leading notch.
notchMiddle	pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow-0 shrink-0 basis-auto w-auto max-w-[calc(100%-1rem)] h-full border-r-0 border-l-0 group-data-[te-input-focused]:border-x-0 group-data-[te-input-state-active]:border-x-0 group-data-[te-input-focused]:border-t group-data-[te-input-state-active]:border-t group-data-[te-input-focused]:border-solid group-data-[te-input-state-active]:border-solid group-data-[te-input-focused]:border-t-transparent group-data-[te-input-state-active]:border-t-transparent	Sets main styles of the middle notch.
notchMiddleNormal	border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[0_1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary	Sets border and shadow of the default middle notch.
notchMiddleWhite	border-neutral-200 group-data-[te-input-focused]:shadow-[0_1px_0_0_#ffffff] group-data-[te-input-focused]:border-white	Sets border and shadow of the form white middle notch.
notchTrailing	pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0	Sets main styles of the trailing notch.
notchTrailingNormal	border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary	Sets border and shadow of the default trailing notch.
notchTrailingWhite	border-neutral-200 group-data-[te-input-focused]:shadow-[1px_0_0_#ffffff,_0_-1px_0_0_#ffffff,_0_1px_0_0_#ffffff] group-data-[te-input-focused]:border-white	Sets border and shadow of the form white trailing notch.

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Method	Description	Example
update	Updates notches, activates the input	myInput.update()
dispose	Disposes a input instance	myInput.dispose()
getInstance	Static method which allows you to get the input instance associated to a DOM element.	Input.getInstance(inputEl)
getOrCreateInstance	Static method which returns the input instance associated to a DOM element or create a new one in case it wasn’t initialized.	Input.getOrCreateInstance(inputEl)

Источник

A Complete Guide To Create A Select Input With Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to create responsive and customizable user interfaces. It allows developers to build complex UI components with ease, without having to write custom CSS code.

The description of Select Input ui component

A select input is a UI component that allows users to choose an option from a list of predefined options. It is commonly used in forms, dropdown menus, and other interactive elements.

Why use Tailwind CSS to create a Select Input ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a select input with minimal effort. It also offers a wide range of customization options, making it easy to create a unique and personalized UI component.

The preview of Select Input ui component

To create a select input with Tailwind CSS, you can use the select and option HTML elements. Here is a preview of what the select input will look like:

Free download of the Select Input’s source code

The source code of Select Input ui component

To create the select input, you can use the following HTML and Tailwind CSS classes:

div>  div class="relative inline-flex self-center">  svg class="text-white bg-purple-700 absolute top-0 right-0 m-2 pointer-events-none p-2 rounded" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 38 22" version="1.1">  title>F09B337F-81F6-41AC-8924-EC55BA135736title>  g id="ZahnhelferDE—Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">  g id="ZahnhelferDE–Icon&Asset-Download" transform="translate(-539.000000, -199.000000)" fill="#ffffff" fill-rule="nonzero">  g id="Icon-/-ArrowRight-Copy-2" transform="translate(538.000000, 183.521208)">  polygon id="Path-Copy" transform="translate(20.000000, 18.384776) rotate(135.000000) translate(-20.000000, -18.384776) " points="33 5.38477631 33 31.3847763 29 31.3847763 28.999 9.38379168 7 9.38477631 7 5.38477631"/>  g>  g>  g>  svg>  select class="text-2xl font-bold rounded border-2 border-purple-700 text-gray-600 h-14 w-60 pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none appearance-none">  option>A-Zoption>  option>Z-Aoption>  select>  div> div> 

How to create a Select Input with Tailwind CSS?

To create a select input with Tailwind CSS, follow these steps:

     Option 1  Option 2  Option 3   

     Option 1  Option 2  Option 3   

For example, you can change the border color of the select input by modifying the border class:

Conclusion

Creating a select input with Tailwind CSS is a simple and easy process that can be done with minimal effort. By using Tailwind CSS, you can create a unique and personalized UI component that is responsive and customizable. With its wide range of pre-defined CSS classes and customization options, Tailwind CSS is a powerful tool for front-end developers who want to create beautiful and functional user interfaces.

Источник