shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI leaves this disabled value out of the submit.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm" disabled><FieldLabel>Account ID</FieldLabel><Input class="bg-background" defaultValue="ACC-12345" 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.
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.
API Reference
Field
Sets disabled. The rest is on the Field page.
Input
Sets defaultValue="ACC-12345" and type="text". The rest is on the Input page.
