Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Helpdesk Ticket Login Block for React

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.
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 Base UI. 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.

  • Pro

    Lockout Recovery Login

    Recovery and reset

    A recovery chooser for a utility account where ticking what you still have (email, phone, a backup code or none) ranks the ways back in live, with a daily request count.

  • Pro

    Account Locked Login

    Recovery and reset

    A locked-account page for a point-of-sale system that draws the lockout ladder, marks the rung the account is on with a fixed unlock time, and offers an unlock link by email or a password reset.

  • Pro

    Contact Support Dialog

    Feedback and reports

    A shipments table with a support dialog shown open: a ticket form with a category, a priority and attached file names, and beside it up to three help articles picked by the category and the subject's words, each opening in place.

  • Pro

    Support Channels Contact

    Support and feedback

    A support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.

  • Pro

    Session Limit Login

    Sessions and devices

    A sign-in gate for a video streaming service: a meter of screens in use, three sessions as radio rows, and one button that ends the chosen session so this browser can continue.

  • Pro

    Forgot Password Login

    Recovery and reset

    A forgot-password page for a school learning platform that never says whether an account exists, offers the right mail domain when one is a letter off, and resends the link on a 30-second wait.