# ThemeSwitcher
> Los tres estados del tema —sistema, claro, oscuro— en una barra segmentada.
```tsx
import { ThemeMenuRadio, ThemeSwitcher } from "sebs7n-ui/theme-switcher"
```
## Ejemplos
### Los tres estados del tema
```tsx
import { ThemeSwitcher } from "sebs7n-ui/theme-switcher"
function Basico() {
return
}
```
## Props
### ThemeMenuRadio
Hereda las props de `Menu.RadioGroup`.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `labels` | `Partial` | — | — |
| `className` | `string` | — | — |
### ThemeSwitcher
Hereda las props de ``.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `labels` | `Partial` | — | — |
| `onKeyDown` | `KeyboardEventHandler` | — | — |
| `className` | `string` | — | — |
## Teclado
| Tecla | Qué hace |
|---|---|
| ← → | Se mueve entre las tres opciones. |
| Enter · Espacio | Aplica. |
| Tab | Entra y sale del grupo. |
## Accesibilidad
- Cada opción tiene nombre accesible propio; los textos se cambian con `labels`.
- Sin `enableSystem` en el `ThemeProvider` no aparece la opción «Sistema».
- Para el mismo control dentro de un menú propio, `ThemeMenuRadio` (ítems `menuitemradio`).
## Reglas de uso
- `ThemeSwitcher` para fuera de un menú: header público, página de ajustes.
- `ThemeMenuRadio` dentro de un `DropdownMenu`. `UserMenu` ya lo trae.
- Necesita `next-themes` con `attribute="class"` y `suppressHydrationWarning` en ``.
## Relacionados
[user-menu](/docs/components/user-menu.md) · [dropdown-menu](/docs/components/dropdown-menu.md) · [toggle-group](/docs/components/toggle-group.md)