shadcn.io is not affiliated with official shadcn/ui
Plan-Gated Disabled Fields Form Block for Radix UI
A workspace settings form where controls the plan does not include are disabled with a lock and the plan that unlocks them, with a Will be saved band that leaves them out.
Installation
Overview
Show what a plan does not include without hiding it, with this disabled fields form for React with Radix UI. A compact header with a "See plans" link sits over a hairline frame with a plus mark on each corner and two bands, Sharing and Security and storage. Each row has its control at the start and a reason column at the end. The controls on the Free plan work: a workspace name, a link expiry select, a password checkbox and a notification switch. The five it leaves out are really disabled and cover every control type: an input, a textarea, a select, a checkbox and a Switch, each with a lock glyph and "Needs the Team plan" or "Needs the Business plan". That reason is also the control's accessible description. A "Will be saved" band lists only the enabled changes and counts the locked controls it leaves out, and Save and Discard stay on screen, answering in words when there is nothing to do. On a phone the reason sits under the control. It is built from Input, Native Select, Textarea, Checkbox, Switch, Shine Button and Guides. For plan-gated settings, permissions and feature flags.
FAQ
How do I change which controls are locked?
Each entry in SHARING and SECURITY has a needs field: an empty string means the plan includes it, and a plan name locks it and prints "Needs the Team plan". Drive needs from your account's entitlements and the lock, the reason, the disabled attribute and the saved list all follow.
Why really disable them instead of just styling them?
A disabled control is skipped by Tab and ignored by submit, so a locked value can never change or be sent by accident, and every assistive technology announces it as unavailable. The reason is tied with aria-describedby, so a screen reader reaches it from the control, and it is visible text, not a tooltip, so touch users get it too. Disabled controls are exempt from contrast rules, so the lock and the reason carry the meaning.
What does the Will be saved band show?
Only the enabled settings whose draft differs from what was saved, by name, plus the number of locked controls that are not included. Save writes exactly those, and the status line counts them as "2 changes not saved yet." until you save or discard.
How does it look on a phone?
The reason column moves under its control and the foot is pinned, with Save and Discard side by side. The reserved lines mean enabling or changing a value never moves a row.