Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Special

Disabled Input for React

A disabled field showing an account ID that can't be edited.

Framework
UI library

Some values are shown but not editable. This example disables the Account ID field, prefilled with ACC-12345, and a description under it says it can't be edited, so the locked state reads as intended rather than broken. Use it for system-generated IDs, computed values and settings someone else manages.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does disabling the field do?

The input can't be focused or edited, it's skipped by Tab, and it's left out of the form's submitted data. It's dimmed with disabled:opacity-50 and shows a not-allowed cursor.

Where is disabled set?

On the Input, the native disabled attribute. The label stays at full strength.

How is the account ID shown?

As the input's default value, ACC-12345. The field is disabled, so it never changes and needs no change handler.

When should I use readOnly instead?

When people should still focus, select and copy the value, or when the form must submit it. A read-only field stays in the tab order and in the submitted data; a disabled one does neither.

What does the line under the field do?

It's a FieldDescription that says This field cannot be edited. Saying why a field is locked helps more than the dimmed style alone.

How is Account ID tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to disabled-account, the input's id.

All 24 input examples