Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Login blocks

Pro

Helpdesk Ticket Login Block for React Aria

A sign-in helpdesk panel for a law firm: an employee ID, a category that shows its usual wait at once, a description with a count, and a ticket card with a reference and the queue facts.

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 who can't sign in ask a person for help, with this helpdesk ticket login block for React with React Aria. It's the IT desk page of Aldergate Legal, a law firm: a short header over one framed panel. At the start, the ticket form: an employee ID in the form AG-1234, a Select for the category whose usual wait appears the moment one is chosen ("MFA device lost: about 25 min"), and a Textarea with a character count. At the end, the desk's facts in a Data List: open tickets, how many are ahead of this category, the median first reply and the desk hours. Sending files a ticket card in the form's place with a reference (HD-4821, then HD-4822), where it stands in the queue and a fixed time, and Start another brings the form back. It's built from Select, Textarea, Data List, Field, Button, Shine Button and Guides, with a CSS entrance only. For helpdesk pages and any form where the answer to "how long?" should come first.

FAQ

What stays in the page, and how do I wire it for real?

Everything. The ticket is filed in the page only: no ticket system is called, no mail app opens (there is no mailto link) and nothing leaves the tab. The employee ID that passes is AG-2047, printed once under the field; the queue, the waits and the reference counter are typed constants. In a product, post the ticket to your helpdesk's API from the submit handler, take the reference from its answer, and get the queue facts from it too.

Where does the wait estimate come from?

Each category carries its usual wait in minutes, typed with it (MFA device lost 25, password reset 10, laptop locked 40, something else 60, software install 120). The line under the select, the status line and the ticket card all read the same value, so they can't disagree. It is shown as soon as a category is chosen, and the first category is chosen when the page opens, so the feature is visible before anyone touches it.

How is the number ahead of me worked out?

The desk has a typed list of the priorities of its open tickets, 1 being the most urgent. A new ticket waits behind the open tickets with the same or a higher priority, so the number is a count over that list for the chosen category's priority: three ahead for a lost device, seven for something else, fourteen for a software install. Each ticket filed in the page joins the open count.

How does the character count work with a screen reader?

The visible count (for example 212 / 400) is hidden from assistive technology so it isn't read on every key. The polite status line says so only at stages: "20 characters to go.", "10 characters to go.", "Limit reached.". The description needs at least 20 characters, and a press with fewer says how many more.

What happens when a field is wrong?

The button is never disabled. A press with a problem shows one short sentence under each field at fault, repeats the first in the status line and puts focus on that field. An employee ID is checked after trimming and upper-casing, so ag-2047 passes.

Does the panel move when the ticket card appears?

No. The form and the ticket share one space in the panel and the foot swaps Send to the desk for Start another in the same box, so the panel keeps its height. On a phone the desk's facts stack under the form.

All 100 login blocks