Amsterdam Design System Separate component and theme
Use the open-source layer honestly
Amsterdam publishes component CSS separately so its class contract can be implemented outside React. The stylesheet depends on CSS custom properties; importing it without a complete theme leaves important dimensions and colors unresolved. The native Switch stylesheet in this specimen is therefore paired with a complete original neutral configuration.
The repository separates open-source packages from proprietary assets. The inspected token package 4.3.0 has its own license notice excluding it from the open-source license. Amsterdam Sans, icons and the city logo also have specific restrictions. This guide uses their existence as context but does not redistribute them or claim that a public npm download grants unrestricted branding rights.
Amsterdam Design System A complete neutral configuration
Supply every property the component needs
The reference table identifies every variable used by the selected Switch stylesheet. Width, thumb dimensions, border width, colors, outline offset, cursor and hover treatment all have explicit values. These are original values for this specimen, not copied Amsterdam design tokens. That distinction lets readers reproduce the example without guessing missing theme pieces.
The track is 50px wide with a 22px thumb and 3px border. The native checked-state transform calculates its travel from thumb width and border width. Altering only the track width can therefore leave the thumb misaligned; change related geometry together and inspect both states.
The React implementation renders a wrapper, an input and an empty associated label. Its CSS uses adjacent-sibling selectors to style the label from input focus, checked and disabled states. Preserve that ordering in a plain HTML implementation; inserting a description between input and label breaks those selectors.
The real input is a checkbox with role="switch". It keeps the native checked property and keyboard behavior. Because the visual label has no text, provide an accessible name through aria-label or aria-labelledby. The specimen references a visible setting title and attaches its explanation through aria-describedby.
The component source defines Switch as an immediate binary setting. The preview follows that contract: larger text changes article size, stronger contrast changes text and outline, and reduced motion removes the short badge appearance effect. There is no Save button pretending that these local choices are sent to an account service.
Restore defaults clears all three native checked states and reapplies the default article classes. A status message describes the enabled settings. Nothing persists after navigation or reload. A production preference service could add persistence, but should state whether the setting affects this page, a device or an account.
Turn on Larger text and inspect the paragraph size in the adjacent article.
Focus Stronger contrast and press Space to toggle it from the keyboard.
Restore defaults and verify all three switches and the article return together.
Amsterdam Design System Keyboard, focus and motion
Keep the native input available
The stylesheet reduces the visual input width but preserves the actual control. Its focus selector places the outline on the following label. Replacing the input with a decorative div would discard native form semantics and require a separate keyboard implementation. Do not apply display:none to the input.
The native stylesheet limits its transitions to prefers-reduced-motion:no-preference. The article effect also respects the operating-system preference, independently of the local toggle. A user asking for less motion at the system level should not need to discover an additional switch before the example behaves calmly.
Use the checked property as the source of truth; do not invent an unrelated visual on-state.
Provide a stable name for each setting and keep its explanation associated with the input.
Test off, on, focus and disabled states after changing theme geometry or colors.
Amsterdam Design System Reading preview composition
Demonstrate the effect beside the control
The example uses a two-column composition so each setting has a visible consequence in the article. Below an application-specific 700px breakpoint, controls stack before the preview. The 900px maximum width and 32px gap are original layout decisions, not evidence for a citywide grid token.
The neutral font is Arial. Body text is 18px with 1.5 leading; the larger-text mode changes only the article to 22px. This is an example of an application setting, not a substitute for browser zoom or a claim that those sizes are prescribed by Amsterdam. Long labels wrap without reducing the native switch width.
For an existing React application, the verified Switch accepts standard input attributes and forwards the ref to the input. Controlled use supplies checked and onChange; uncontrolled use can supply defaultChecked. The component does not supply application storage or an account-preference API.
For this independent HTML example, only the open-source Switch CSS is required. The setup and complete code provide the missing theme configuration and local state handling. The package installer may pull proprietary assets as dependencies; their presence on disk is not permission to import or ship them. The vendored specimen contains only the selected CSS and its open-source license.
The city system is intended to make municipal products consistent and accessible. Its reusable code can be studied and adapted within its license, but its logo, proprietary font and icon assets have separate terms. The preview uses original branding and neutral content so it is not mistaken for an Amsterdam service.
The verified scope is one native component with a complete custom theme and meaningful local behavior. It is not a full reimplementation of the city theme. A real product adopting the broader CSS package should define and test all variables required by the additional components rather than extrapolating this Switch configuration to unrelated controls.
Open-source CSS only; complete original theme and working HTML follow. No proprietary token or asset bundle is shipped. The complete working-example ZIP in Sources also provides the exact preview dependencies and full document. Extract it, run python3 -m http.server 8080 in that directory, then open http://localhost:8080/amsterdam.html. Do not open module-based examples through file://.
bash
npm install @amsterdam/[email protected]
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
A Prompt for Your Project
Agent Prompt
Use Amsterdam open-source Switch CSS with a complete original theme. Preserve wrapper/input/adjacent-label anatomy, role=switch and accessible naming. Apply binary settings immediately and use checked as state. Respect reduced motion and distinguish local preferences from persisted account settings. Do not import proprietary tokens, fonts, logos or icons without the relevant rights.
05
Amsterdam Design System Sources and Scope
Independent OpenDesign specimen. Amsterdam brand tokens, Amsterdam Sans, official icons and logo are not included.
