Forms

The Input component allows you to change the input size, add disabled, helper text, and floating label.

Input Sizes

User the size prop to change the input size. Choose one from 'sm:text-md' | 'text-sm' | 'sm:text-xs'. The default size is text-sm.

Large input

Default input

Small input

Get started with this example if you want to apply the disabled state to an input field. Add the disabled to change the input to disabled.

Use the helper prop to add your helper text. You can use HTML in the helper text.

Your email

We’ll never share your details. Read our Privacy Policy .

With the Input component, you can add Heroicons or other icon sets.

Your Email

Username

Use the following example to apply validation styles for success and error messages.

Your name

Well done! Some success message.

Your name

Not so well done! Some error message.

Get started with the default example of a select input component to get a single option selection.

Select an option

Default checkbox Checked state

Default radio Checked state

Upload file

Toggle me Checked toggle Disabled toggle Disabled checked