Components · Type-to-Confirm Delete
Type-to-Confirm Delete
The button unlocks only when the resource name is typed exactly
No basis in this component: Motion · Density · Variant — and a control that changes nothing is not shown.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the prompt — once for the whole site.
Enter your email to reveal the code and the prompt
Once. No password, no account.Usage
- Copy
tokens.cssinto your project and link it before the component styles. - Link
fonts.css— the component asks for a font family from the tokens. - Paste the HTML markup where you want it.
- Paste the CSS into your sheet — its selectors are scoped to the component class, so nothing leaks.
- Paste the JS after the markup, or load it with
defer. - Set
dirtortlorltr— the component works with both.
States
FocusDisabledError
RTL/LTR
Works in both directions — Arabic and English. Enforced in every build by , and exercised in the playground above.
Responsive
No fixed width that overflows, and a layout that stretches.
Accessibility
- Every field is named, with no redundant ARIA —
- Fully operable by keyboard
- Carries an explicit semantic role
Dependencies
No external dependency — no CDN, no package to download.
tokens.css— Every colour and size in the component points to a token, with no literal valuefonts.css— The component asks for a font family from the tokensscript.js— The component behaviour lives there — without it, it renders but does not work
Examples
- In English — The direction flips and the layout follows
- In light mode — Colours come from tokens, so they follow the theme
- On the mobile stage — A width of 360 pixels
- Without motion — As anyone who prefers reduced motion sees it
Not documented yet: When to use · When not to use · Motion — it needs human judgement, and no prose will be generated that looks like judgement without being it.