Components Theming
ThemeSwitcher
StableA segmented control that lets people choose light, dark, high contrast or system.
ThemeSwitcher reads and writes the ThemeProvider preference. Place it where people expect appearance settings: a header, footer or settings page. Limit the options when a product only supports some modes, but always keep high contrast available where possible.
Overview
import { ThemeSwitcher } from '@bindshq/stance-react';
export function Basic() {
return <ThemeSwitcher />;
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { ThemeSwitcher } from '@bindshq/stance-react';Platforms
ThemeSwitcher has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.
import { ThemeSwitcher } from '@bindshq/stance-react';Examples
With labels
Visible labels suit settings pages.
import { ThemeSwitcher } from '@bindshq/stance-react';
export function WithLabels() {
return <ThemeSwitcher showLabels />;
}Compact
The small size fits dense headers and footers.
import { ThemeSwitcher } from '@bindshq/stance-react';
export function Small() {
return <ThemeSwitcher size="sm" />;
}import { ThemeSwitcher } from '@bindshq/stance-react';
export function LimitedOptions() {
return <ThemeSwitcher showLabels options={['light', 'dark', 'system']} label="Appearance" />;
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
showLabels | boolean | false | Show text beside each icon. Icons alone get accessible names and titles. |
options | Array<'light' | 'dark' | 'high-contrast' | 'system'> | all four | Which choices to offer. |
label | string | 'Theme' | Accessible name of the radio group. |
size | 'sm' | 'md' | 'md' | Control size. |
Accessibility
- A radiogroup of radio buttons with aria-checked; the group is named “Theme” by default.
- One tab stop: arrow keys move between options and select them, matching native radio groups.
- Icon-only options have accessible names and visible tooltips through title.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves focus into and out of the group. |
| ← → | Selects the previous or next theme. |
| Home End | Moves to the first or last option. |
Usage guidelines
Do
- Offer System so the product follows operating-system changes.
- Keep the switcher in the same place on every page.
Don’t
- Hide high contrast behind a separate setting.
- Use a switch for three or more options.