Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Legal Document File Upload Block for React Aria

A filing sheet for a contract: document type, two to six named parties, an effective date, a confidentiality tier with its handling rule, an attorney-review box, the file, and a derived summary.

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

File a contract with the facts counsel needs, with this file upload panel for React with React Aria. It is the filing sheet of Clausework, contract intake for in-house counsel. A Segment Group picks the document type (NDA, Lease, Employment, Other), a list of Input fields names two to six parties with an Add a party button, a date field sets the effective date, and four confidentiality tiers (Public, Internal, Confidential, Restricted) each spell out how the document is handled. A Checkbox asks for attorney review, and a single-file File Upload strip takes the document. A Filing summary reads the fields back as one sentence while you change them, and the foot's Shine Button, File document, checks that every party has a name, a date is set and a file is chosen. The frame's bands are ruled by Guides. For legal ops, procurement and any app that logs documents with their parties and handling rule.

FAQ

Where does the summary come from?

From the fields, as you change them: "NDA between Tarnside Lettings, effective 1 Nov 2026, marked Confidential, with attorney review requested." Nothing is typed twice, parties with an empty name are left out, and the sentence has room for two lines so changing a field never moves the sheet.

How does the parties list work?

It starts with two rows and holds at most six. Add a party appends a row and moves focus into it; a row's remove button names its party and leaves focus on Add a party; with two left the remove buttons are marked unavailable and say why when pressed. An empty row is reported when you file, with the first empty one named.

What do the tiers do?

Only what the sentence under each one says: who can open the document. They are four native radio buttons styled as rows, so the arrow keys move the choice and the chosen one is outlined and filled, not just tinted. The rules are sample copy; in your app they would map to access rules on your server.

Is the file read?

No. A PDF or DOCX up to 25 MB is listed by name and size, can be replaced or removed, and is never opened or uploaded. A file of another type or over the limit is refused with a polite line.

What stays local, and how do I wire it to a server?

Everything. File document validates and then says "Filed in this demo", and nothing is saved. In your app post the fields and the file from submit, create the record on your server, and show its reference in the status line.

How does it look on a phone?

The two columns become one: type and parties first, then the date, tiers and review box. The foot is pinned to the bottom of the screen with the status line and File document.

All 100 file upload blocks