Why Chameleon
Chameleon is built for the software your organization actually ships, with many locales, real server-side data, strict accessibility rules, robust content security policies, and multiple front-end stacks. We set out what that means in practice here.
184 locales
Every component's built-in text, from a dialog's Close button to a field's screen-reader announcements, comes in 184 locales across 149 languages. See locales for specific information.
Numbers
Not just digits. Users in different locales expect different number formats, and the number field fully supports them: it either accepts a specific locale or defaults to the user's preference.
Four locales, including India's lakhs and crores
On focus it swaps to a native numeric input with the caret preserved, so editing feels like the platform; on blur it formats again. Either way, the value you read off the element is a clean numeric string. Your form code never has to strip a comma again.
Right-to-left
Set dir="rtl" on the page or on any container, and every component inside follows it: its layout mirrors, and its directional icons flip.
Dates (soon)
Date pickers will start each week on the locale's first day of the week and label the days with abbreviated day names in the locale's language.
Server-friendly components
Data grids
The data grid virtualizes its rows, querying your server asynchronously as the user scrolls.
Input events
Text, search, and number fields can pace the events they fire, and so can sliders, dials, and the navigation bar. Each can fire on every change, after a pause, at a steady rate, or adaptively. Adaptive pacing measures how fast your server answers and never asks faster, so your front end can't overwhelm it. Sliders, dials, and the navigation bar can also fire once, when the drag or scroll ends. Event pacing explains each mode.
Ongoing accessibility
Our accessibility work is, and always will be, ongoing as we improve it and iron out issues. Every Chameleon component targets WCAG 2.2 AA. Tell us when we get it wrong.
- WCAG 2.2 AA is the baseline all components are measured against, including for contrast, target size, and focus visibility.
- Keyboard navigation works across every component, so users can move around without a mouse. Focus rings follow the theme, and keyboard interaction meets WCAG 2.2's Keyboard, No Keyboard Trap, and Focus Visible criteria.
- WAI-ARIA Authoring Practices patterns are implemented in full. A dial reports itself to assistive technology as a standard slider, a button is a button, and a menu behaves the way a screen-reader user expects.
The practical payoff is that a procurement accessibility assessment is answerable with evidence, across all components. Accessibility sets out what is tested, what is left to your app, and how to report a problem.
Our pledge to you
Chameleon will:
- Never call out from your app: no reports on your users, no license checks, nothing.
- Never rescind a license, because your deployed app has its license checked at build time and then works forever on that check. The next time you build, the license is checked again for that build.
- Never load from another origin: no fonts, images, scripts, or other data from anywhere but your page. It runs under a strict Content-Security-Policy with no
'unsafe-inline'and no'unsafe-eval'.
Versions
Chameleon is in pre-release until February 1, 2027. Until then we may change an API in response to what users ask for, but aim to avoid this.
On February 1, 2027, we release 27.0.0, and from then on Chameleon follows semantic versioning: a major version is the only release that may break your code, and its release notes list every change you must make. The changelog records every release.
One source, multiple frameworks
Chameleon supports you if you have multiple front-end frameworks. It's a web components library at its core, wrapped by React and Blazor (and soon Angular, Vue, and Svelte) so it behaves as if it were native to each framework. All frameworks then get the same properties, behaviors, and styling.
So you can use multiple frameworks across apps, or even within the same app, and your users won't see any difference.
Only your branding matters
Building on Material 3 Expressive's excellent styling, with enhanced color theming utilities and an added CSS corner-shape implementation, Chameleon is designed from the outset to adopt your branding.
The built-in color utilities provide nine Material theme variants, plus one we added and use on this website, or you can build your own color theme from the CSS tokens. Every token is documented on each component's page.