Question 1

What is an input component?

Accepted Answer

The styled text field you use in every form: text, email, password, number, search, date, file. shadcn.io's Input renders a native input with a consistent border, focus ring, disabled and invalid styles and your theme's colors. It's built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid.

Question 2

Are these input examples free?

Accepted Answer

Yes. Every input example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is Input different from a plain input element?

Accepted Answer

It is a plain input element underneath, so autofill, the mobile keyboards and native validation all work. Input adds the styling: height, padding, border, focus ring, placeholder color, and disabled and invalid states that follow your theme in light and dark mode.

Question 4

When should I use Input, Input Group or Combobox?

Accepted Answer

Input for a single value. Input Group when the field needs an icon, text or a button inside it, as the email, search and password examples do. Combobox when the value comes from a list people search through.

Question 5

How do I build a password field with a show and hide button?

Accepted Answer

Keep the visibility in state, switch the input's type between password and text, and put the button in an Input Group addon at the inline end, as the Password with Toggle example does. Give the button a label that says what it will do, Show password or Hide password. Password Input has the toggle built in.

Question 6

Which input type should I use for email, phone or search?

Accepted Answer

The native type for the data: `email`, `tel`, `url`, `search`, `number`, `date`, `time`. Each brings the right keyboard on phones, and `email` and `url` are checked by the browser on submit. The Types examples show each one.

Question 7

How do I show a validation error?

Accepted Answer

Mark the Field invalid and put the message in FieldError, as the Error State example does. The input gets `aria-invalid` and a destructive border and ring, and the message is announced. Show errors after submit or when the field loses focus, not on every keystroke.

Question 8

How do I install an input example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the components it uses, such as Input, Field, Input Group or Button, to your project.

Question 9

How do I change the input's height or padding?

Accepted Answer

Pass classes such as `h-10` or `px-4` to the input; they merge with its own. Keep fields and buttons the same height in a row so they line up.

Question 10

How do I control autofill?

Accepted Answer

With the input's `autocomplete` attribute: `email`, `tel` or `name` to help browsers fill it in, `new-password` on a password being created, `one-time-code` on a verification code, and `off` where suggestions get in the way.

Question 11

What do the input examples depend on?

Accepted Answer

The Input and Field components and Tailwind CSS, plus Input Group and Button where an example needs them, and Lucide icons. Values that change live in the example's own state; there's no form library.

Question 12

Are input examples accessible?

Accepted Answer

Every example labels its input with FieldLabel, sets the input's type, hides decorative icons from screen readers and names icon-only buttons. Invalid fields set `aria-invalid`, and their messages are announced.

Question 13

Can I use these examples with React Server Components?

Accepted Answer

On React, the examples without state, such as the labeled, typed and state examples, render as Server Components. The ones that keep a value in state, such as the counter, the password toggle and the file list, are client components.

Input Examples

Currency Input

Disabled Input

File Upload with List

Range Slider with Value

Time Input

Inline Label

Optional Field

Required Field

Input with Character Counter

Input with Description

Input with Helper Text

Input with Label

More component examples

Input Group

Input OTP

Label

Textarea

Field

Form

Item

Kbd

Input examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every input example. One prompt away.