Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Read-Only Fields Form Block for Vue

An account details form that starts read-only with a Copy button on the account ID, then unlocks only the username and bio on Edit, keeping the email and region locked.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people see their details before they change them with this read-only fields form for Vue with Ark UI. A compact header with an "Edit details" button sits over a hairline frame with a plus mark on each corner and one band of rows, each with its label at the start and its value at the end. The values are read-only inputs, not disabled ones, so they keep focus and can be selected and copied. The account ID has a Copy button, the email says "Managed by your organisation" and the region is fixed, each with a lock beside its label. Edit details unlocks only the username and the bio; Save checks them, shows a problem under the field and says what changed ("Saved username and bio."), and Cancel puts both back. Save and Cancel are always on screen and answer in words when there is nothing to do. On a phone the rows stack. It is built from Input, Textarea, Button, Shine Button and Guides. For account and profile pages, record views and any detail screen with a few editable parts.

FAQ

Why read-only inputs and not disabled ones?

A readOnly input stays in the tab order, can be focused and selected, and is announced with its value, while a disabled one is skipped and greyed out. That is what you want for an ID someone needs to copy. The locked look comes from a filled background, and a lock glyph with a screen-reader-only "(locked)" marks the permanent ones.

How do I change which fields can be edited?

The username and bio are the only inputs whose readOnly follows the editing flag; the others are always read-only. To unlock another, bind its readOnly to !editing, add it to the draft and to changesOf, and give it a rule next to usernameProblem.

How does Copy work, and what if it is blocked?

It writes the ID to the clipboard and says "Account ID copied." in the status line. If the browser refuses (some embedded views do), the status says to select the ID instead, which the read-only input allows.

How does it work with a keyboard and a screen reader?

Edit details moves focus to the username. Each field has a visible label tied by for and a reserved line tied by aria-describedby, so a problem appears without moving anything. The foot status is the one polite region and tells you whether you are in read or edit mode.

What stays local, and how do I connect it for real?

Save keeps the two values in the tab and says nothing was sent. To make it real, send the changed fields from save and return your server's problems into the same two slots.

How do I connect it to react-hook-form or TanStack Form?

react-hook-form is a React library; use TanStack Form's adapter for your framework, load the details as default values and reset the form from Cancel.
All 100 form blocks