Secret Field
An API key in its three states: shown once, hidden but revealable, and gone.
- Forms
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add secret-fieldNo npm packages are needed beyond what Dowel already requires.
import { SecretField } from "@/components/ui/secret-field";Default
Shown Once
Revealable
Gone
<SecretField>
| Prop | Type | Default |
|---|---|---|
label (required) | string | — |
onAcknowledgeThe reader has saved a shown-once value. Drop | () => void | — |
onceThis is the only time the value can be seen. | boolean | false |
onRegenerateOffers to regenerate. Confirmed inline first, because it revokes the current one. | () => void | — |
onRevealChangeCalled each time the value is shown or hidden, so reveals can be logged. | (revealed: boolean) => void | — |
previewWhat stands in for it while hidden or gone. Derived from the value when there is one. | string | — |
regenerateWarningSaid before regenerating. | string | "Regenerating revokes this one immediately. Anything still using it stops working." |
valueThe secret. Omit once it can no longer be shown. | string | — |
childrenMetadata — when it was created, when it was last used. | ReactNode | — |
Plus every attribute of <div> except children.
The value sits in a read-only input rather than a disabled one, so it can be focused, selected and read, and focusing a shown value selects all of it for copying by hand. The field's state — shown once, hidden, revealed, gone — is a sentence attached as its description, never a colour or an icon. Copying is announced through a status region that exists before the first copy, and failure is announced too, with what to do instead, because the clipboard can be refused. Every button carries the field's label in its name, so a settings page with several keys has several distinct Copy buttons. Regenerating is confirmed inline in a named group that states the consequence, since it revokes the current key.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes