Tailwind CSS React Inputs

Basic example

A basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputBasicExample(): JSX.Element {
        return (
          <TEInput
            type="text"
            id="exampleFormControlInput1"
            label="Example label"
          ></TEInput>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Sizing

Set heights using props like size="lg", size="base", size="sm".

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputSizing(): JSX.Element {
        return (
            <div>
              <TEInput
                type="text"
                id="exampleFormControlInput2"
                label="Form control lg"
                size="lg"
              ></TEInput>
              <TEInput
                type="text"
                id="exampleFormControlInput3"
                label="Default input"
                size="base"
              ></TEInput>
              <TEInput
                type="text"
                id="exampleFormControlInput4"
                label="Form control sm"
                size="sm"
              ></TEInput>
            </div>
        );
      }

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputDisabled(): JSX.Element {
        return (
          <TEInput
            type="text"
            id="exampleFormControlInput5"
            label="Disabled input"
            disabled
          ></TEInput>
        );
      }

Readonly

Add the readOnly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputReadOnly(): JSX.Element {
        return (
          <TEInput
            type="text"
            id="exampleFormControlInput50"
            label="Readonly input"
            value="Readonly input here..."
            readOnly
          ></TEInput>
        );
      }

Text

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

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputText(): JSX.Element {
        return (
          <TEInput
            type="text"
            id="exampleFormControlInputText"
            label="Text input"
          ></TEInput>
        );
      }

Email

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

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputEmail(): JSX.Element {
        return (
          <TEInput
            type="email"
            id="exampleFormControlInputEmail"
            label="Email input"
          ></TEInput>
        );
      }

Password

The <TEInput type="password"></TEInput> defines a password field thus hiding characters as sensitive information.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputPassword(): JSX.Element {
        return (
          <TEInput
            type="password"
            id="exampleFormControlInputPassword"
            label="Password input"
          ></TEInput>
        );
      }

Number

The <TEInput type="number"></TEInput> defines field for entering a number.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputNumber(): JSX.Element {
        return (
          <TEInput
            type="number"
            id="exampleFormControlInputNumber"
            label="Number input"
          ></TEInput>
        );
      }

Phone number

The <TEInput type="tel"></TEInput> defines a field for entering a telephone number.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputPhoneNumber(): JSX.Element {
        return (
          <TEInput
            type="tel"
            id="exampleFormControlInputTel"
            label="Phone input"
          ></TEInput>
        );
      }

URL

The <TEInput type="url"></TEInput> defines a field for entering a URL.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputURL(): JSX.Element {
        return (
          <TEInput
            type="url"
            id="exampleFormControlInputURL"
            label="URL input"
          ></TEInput>
        );
      }

Helper text

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

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputHelperText(): JSX.Element {
        return (
          <TEInput type="text" id="exampleFormControlInputHelper" label="Input">
            <div className="absolute w-full text-sm text-neutral-500 peer-focus:text-primary dark:text-neutral-200 dark:peer-focus:text-primary">
              Text helper
            </div>
          </TEInput>
        );
      }

Character counter

Add prop counter and set the maxLength attribute to create a counter.

        
            
      import React from "react";
      import { TEInput } from "tw-elements-react";
      
      export default function InputCharacterCounter(): JSX.Element {
        return (
          <TEInput
            type="text"
            id="exampleFormControlInputCounter"
            label="Example label"
            counter
            maxLength={20}
          ></TEInput>
        );
      }

If you are looking for more advanced options, try Bootstrap Inputs from MDBootstrap.

Import

Properties

TEInput

Name	Type	Default	Description
`defaultValue`	string	`-`	Default value of the `TEInput`
`disabled`	boolean	`false`	Makes the `TEInput` disabled
`id`	string	`-`	Defines an id for the `TEInput`
`ref`	React.RefObject	`-`	Reference to input element.
`label`	React.ReactNode	`-`	Defines a label text for the `TEInput`
`labelID`	string	`-`	Defines an id for the `label`
`labelRef`	React.RefObject	`-`	Reference to label element
`name`	string	`-`	Specifies the name for the `TEInput`
`readOnly`	boolean	`false`	Makes the `TEInput` read only
`size`	string	`base`	Sets the size of the `TEInput`
`value`	string	`-`	Sets the value for the `TEInput`
`counter`	boolean	`false`	Creates a character counter
`maxLength`	number	`-`	Sets the maximum length of character counter
`formWhite`	boolean	`false`	Changes notches colors to white.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component

Classes

Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

Name	Default	Description
`activeInput`	placeholder:opacity-100	Sets classes when the input element is active.
`activeLabel`	scale-[0.8]	Sets classes of the label when input element is active.
`activeNotchLeading`	border-r-0	Sets stylesof leading notch when input element is active.
`activeNotchMiddle`	border-x-0 border-t border-solid border-t-transparent dark:border-t-transparent	Sets styles of middle notch when the input element is active.
`activeNotchTrailing`	border-l-0	Sets styles of trailing notch when the input element is active.
`activelabelSizeBase`	-translate-y-[0.9rem]	Sets label translate styles when `TEInput size="base"`and is active.
`activelabelSizeLg`	-translate-y-[1.15rem]	Sets label translate styles when `TEInput size="lg"` and is active.
`activelabelSizeSm`	-translate-y-[0.75rem]	Sets label translate styles when `TEInput size="sm"` and is active.
`counter`	text-right leading-[1.6]	Sets text alignment and line height of input counter wrapper.
`focusedNotchLeading`	border-r-0	Sets stylesof the leading notch when input element is focused.
`focusedNotchLeadingDefault`	shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] border-primary dark:border-primary	Sets styles of default leading notch when input element is focused.
`focusedNotchLeadingWhite`	shadow-[-1px_0_0_#ffffff,_0_1px_0_0_#ffffff,_0_-1px_0_0_#ffffff] border-white	Sets styles of white leading notch when the input element is focused.
`focusedNotchMiddle`	border-x-0 border-t border-solid border-t-transparent dark:border-t-transparent	Sets styles of middle notch when the input element is focused.
`focusedNotchMiddleDefault`	shadow-[0_1px_0_0_#3b71ca] border-primary dark:border-primary	Sets styles of default middle notch when the input element is focused.
`focusedNotchMiddleWhite`	shadow-[0_1px_0_0_#ffffff] border-white	Sets styles of white middle notch when the input element is focused.
`focusedNotchTrailing`	border-l-0	Sets styles of trailing notch when the input element is focused.
`focusedNotchTrailingDefault`	shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] border-primary dark:border-primary	Sets styles of default trailing notch when the input element is focused.
`focusedNotchTrailingWhite`	shadow-[1px_0_0_#ffffff,_0_-1px_0_0_#ffffff,_0_1px_0_0_#ffffff] border-white	Sets styles of white trailing notch when the input element is focused.
`input`	peer block min-h-[auto] w-full rounded border-0 bg-transparent outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary motion-reduce:transition-none` placeholder:opacity-0 disabled:bg-neutral-100 read-only:bg-neutral-100 dark:disabled:bg-neutral-700 dark:read-only:bg-neutral-700 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary	Sets classes the to the input element.
`inputDefault`	text-neutral-800 dark:text-neutral-200	Sets classes the to the input element when formWhite was set to false.
`inputWhite`	text-white	Sets classes the to the input element when formWhite was set to true.
`inputSizeBase`	px-3 py-[0.32rem] leading-[1.6]	Sets input padding and leading styles when `TEInput size="base"`.
`inputSizeLg`	px-3 py-[0.32rem] leading-[2.15]	Sets input padding and leading styles when `TEInput size="lg"`.
`inputSizeSm`	px-3 py-[0.33rem] text-xs leading-[1.5]	Sets input padding, text and leading styles when `TEInput size="sm`.
`label`	pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate transition-all duration-200 ease-out peer-focus:scale-[0.8] motion-reduce:transition-none	Sets classes to the label element.
`labelDefault`	text-neutral-500 dark:text-neutral-200 peer-focus:text-primary dark:peer-focus:text-primary	Adds color classes to the label.
`labelWhite`	text-white	Adds color classes to the label when `formWhite` prop was added.
`labelSizeBase`	pt-[0.30rem] leading-[1.6] peer-focus:-translate-y-[0.9rem]	Sets label styles when `TEInput size="base"`.
`labelSizeLg`	pt-[0.36rem] leading-[2.15] peer-focus:-translate-y-[1.15rem]	Sets label styles when `TEInput size="lg"`.
`labelSizeSm`	pt-[0.36rem] text-xs leading-[1.5] peer-focus:-translate-y-[0.75rem]	Sets label styles when `TEInput size="sm"`.
`notch`	group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none	Sets classes 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]	Sets main styles of the leading notch.
`notchLeadingDefault`	border-neutral-300 dark:border-neutral-600	Sets styles of default leading notch.
`notchLeadingWhite`	border-neutral-200	Sets styles of 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	Sets styles of middle notch.
`notchMiddleDefault`	border-neutral-300 dark:border-neutral-600	Sets styles of default middle notch.
`notchMiddleWhite`	border-neutral-200	Sets styles of 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]	Sets styles of trailing notch.
`notchTrailingDefault`	border-neutral-300 dark:border-neutral-600	Sets styles of default trailing notch.
`notchTrailingWhite`	border-neutral-200	Sets styles of white trailing notch.
`wrapper`	relative	Adds classes to the input wrapper.

Events

Name	Description
`onChange`	A callback fired when the `TEInput` changed.
`onBlur`	A callback fired when the `TEInput` lost focus.

        
            
        import React from "react";
        import { TEInput } from "tw-elements-react";
        
        export default function InputBasicExample(): JSX.Element {
          const handleChange = () => {
            // do something ...
          }
          return (
                <TEInput
                  type="text"
                  id="exampleFormControlInput1"
                  label="Example label"
                  onChange={handleChange}
                ></TEInput>
          );
        }

Inputs