Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Disabled Input for React

A disabled Account ID field showing ACC-12345, with a line under it that says the field cannot be edited.

Account ID shows ACC-12345 and the field is disabled. A line under it says this field cannot be edited. The control looks dimmed.

Use it for an id people should see but not change, and say why. If they must copy it, or the form must send it, a read-only Input stays available. In React, Base UI leaves this disabled value out of the submit.

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

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="disabled-account">Account ID</FieldLabel>
  <Input
    className="bg-background"
    defaultValue="ACC-12345"
    disabled
    id="disabled-account"
    type="text"
  />
  <FieldDescription>This field cannot be edited.</FieldDescription>
</Field>

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.

API Reference

Field

Sets htmlFor="disabled-account". The rest is on the Field page.

Input

Sets defaultValue="ACC-12345", disabled, id="disabled-account" and type="text". The rest is on the Input page.

All 24 input examples