Skip to content

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

Free

Read-only Textarea for Svelte

A read-only textarea showing This content cannot be edited. The text can be selected and copied, and the field can still be focused.

UI library: Ark UI

The textarea shows This content cannot be edited. It can be focused, selected, and copied. It cannot be changed. Its accessible name is Message.

Use it for a generated summary or terms people must read and copy. Disable the field instead when it should leave the tab order. One line belongs in an Input. In Svelte, Ark UI does not stop the text from being selected.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Textarea anatomy: textarea, caret, placeholder, resize handle

Usage

<Textarea aria-label="Message" class="max-w-md bg-background" defaultValue="This content cannot be edited" placeholder="This textarea is read-only" readonly />

FAQ

Can users still select and copy text from read-only textareas?

Yes. Selecting, copying and scrolling work as in any Textarea; only typing, pasting and cutting are blocked. That makes it a good fit for values people copy elsewhere, such as a key or a generated snippet.

Can read-only textareas receive keyboard focus?

Yes. It stays in the tab order and shows the Textarea's focus ring, so keyboard users can reach it and screen readers can read it line by line. That's the main reason to prefer it over disabled for content people need to read.

Are read-only values included in form submissions?

Yes, unlike disabled ones: a read-only Textarea with a name submits its value. Browsers skip constraint validation such as required on read-only fields, so check the value elsewhere if it matters.

How do I visually distinguish read-only from editable textareas?

By default it looks exactly like an editable Textarea. Add a class such as read-only:bg-muted to set it apart, and keep enough contrast that the text stays easy to read.

When should I use readOnly instead of disabled?

Use readOnly when the value matters: people need to read or copy it, or the form must submit it. Use disabled when the field doesn't apply right now, such as before a prerequisite is met, as in the Disabled Textarea example.

Why use defaultValue instead of value for read-only textareas?

Nothing typed can change the text, so there's nothing to keep in sync: setting it once is enough. Bind the value instead only when it changes from outside, such as a log that streams in.

API Reference

Textarea

Sets aria-label="Message", defaultValue="This content cannot be edited", placeholder="This textarea is read-only" and readonly. The rest is on the Textarea page.