Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Form

Form with Description Alert Dialog for React

An alert dialog with one labeled input and helper text under it.

Framework
UI library

A label alone doesn't always say what good input looks like. This React alert dialog asks for an API key name and adds helper text under the input. It's shadcn.io's Alert Dialog on Base UI with an Input in a Field and its FieldDescription.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What should the helper text say?

What helps people get it right: purpose, format or limits. Use a name that describes where this key will be used beats repeating the label.

Helper text or placeholder?

Both. The placeholder shows an example, Production API Key, and disappears as people type; the description stays visible, so put requirements there.

How long should it be?

One short sentence. If it needs more, the input is probably too complex for a dialog.

How is the field built?

A Field with FieldLabel, the Input and a FieldDescription under it. The field ties the label and description to the input, so screen readers announce both.

How do I show an error instead?

Mark the field invalid and add a FieldError with what to fix, as in Form with Validation State.

Does Create Key close the dialog?

Yes; read the value and create the key in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

All 39 alert dialog examples