shadcn.io is not affiliated with official shadcn/ui
Minimal Team Name Onboarding Block for Radix UI
A whole-screen first question for a shared notes app: the heading asks what the team is called, one large input is only a line to type on, and a drawn browser tab shows the name as you type it.
Installation
Overview
Ask one thing and nothing else, with this minimal onboarding screen for React with Radix UI. It's the first step of Jotwick, a shared notes app: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. In the band are “Step 1 of 3” over three hairline segments, the question as the heading, one sentence, and a large Input with no box, just a line to type on, centred. Under it a drawn browser tab shows the team's name and the product as you type, so the answer has a visible result. Continue is the only colored control, a Shine Button; until the name has two characters it waits quietly in a muted fill, and pressing it says what is missing and puts you back in the field. Skip for now leaves it for later. Nothing is created: the result says what Jotwick would do next. Built from Field, Input, Button, Shine Button and Guides. For sign-up flows, workspace creation and any one-question step.
FAQ
What happens when I press Continue, and what stays in the page?
Nothing leaves the page. With a valid name, Continue (or Enter) shows a polite status message under the form: saved in this demo, and what Jotwick would create next. To wire it for real, create the workspace on your server where submit says so, keep the button busy until it answers, then go to the next step; if your server refuses the name, show its reason in the line under the field and keep focus there.
Why isn't Continue disabled until the name is long enough?
A disabled button can't explain itself, and keyboard users can't reach it. Here it stays pressable but quiet: it carries aria-disabled, a muted fill and no shine, and pressing it (or Enter in the field) writes the problem under the input, with an icon, and moves focus to the field. The browser's own validation bubbles are turned off with noValidate, so the message looks the same everywhere. The line holds a hint and the problem in one slot, so nothing moves when it changes.
What is the drawn browser tab for?
It shows the answer working: the name, a middle dot and the product name, cut short when it's long, as a real tab would show it. It's a drawing, hidden from assistive technology; the field and its status carry the same information. Change PRODUCT and the tab follows.
Do browsers fill the field in?
The input has autocomplete="organization", which is what browsers look for on an organisation or team name, a real name from the heading through aria-labelledby, and dir="auto" so a name in Arabic or Hebrew reads from its own side. For a personal workspace name, change the value to off.
What does Skip for now do?
Here it says skipped in this demo and that the name can be set later in Settings, and clears nothing. In your app give the team a default name (a person's first name plus “'s team”) so a skipped step still leaves something to rename.
How does it look on a phone?
The same, in one column: the band is tighter so Continue is on the first screen, and the input text is a size smaller. The page is as tall as the screen (min-h-svh, which doesn't jump when a phone's toolbars hide) and centres its content with a little more room below than above.