Components · Reorderable List
Reorderable List
Drag by the handle, with an arrow-key path as the alternative
No basis in this component: 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. - 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
FocusActiveEmpty
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
Motion
Short transitions on hover and focus. And it stops for anyone who prefers reduced motion.
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 valuescript.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 — it needs human judgement, and no prose will be generated that looks like judgement without being it.