Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProLight, Dark and System as a segmented control with text names that cannot be emptied and a status that says what System currently resolves to.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this in settings and headers where the three-way theme choice is shown instead of a menu.
Do not use it for only light and dark (a switch is enough). It reports the choice; applying the theme (class or attribute) is up to you.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
value | light | dark | system | - | Chosen theme. |
onValueChange | (value) => void | - | Called with the new choice. |
prefers-color-scheme and kept up to date.| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | move between themes |
| Enter or Space | choose |
The pattern ships a Testing Library test (toggle-group-theme.test.tsx) that covers the labelled group and names, what System resolves to, switching and the sticky choice.