Component reference
Switch
Controlled appearance preferences with supporting descriptions.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Switch } from "@pimolu/react";
function AppearanceSwitches() {
const [darkMode, setDarkMode] = useState(true);
const [autoTheme, setAutoTheme] = useState(false);
return (
<div className="grid gap-5 min-w-0">
<Switch
label="Dark mode"
description="Use a dark palette everywhere."
checked={darkMode}
onCheckedChange={setDarkMode}
/>
<Switch
label="Follow the system"
description="Match the operating system preference."
checked={autoTheme}
onCheckedChange={setAutoTheme}
/>
</div>
);
}
export function DemoExample() {
return (<AppearanceSwitches />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg.
Variants
The color of the active track.
States
Disabled, required and described switches.
Usage
Use Switch for an immediately applied setting; keep persistence in the application.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluSwitchProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | undefined | "md" | Visual size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Active color. |
label | string | undefined | — | Visible accessible label. |
description | string | undefined | — | Additional descriptive text. |
onCheckedChange | ((checked: boolean) => void) | undefined | — | Called when the checked state changes. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | false | Standard React/HTML attribute. |
size"sm" | "md" | "lg" | undefinedDefault: "md"
Visual size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Active color.
labelstring | undefinedNo default extracted.
Visible accessible label.
descriptionstring | undefinedNo default extracted.
Additional descriptive text.
onCheckedChange((checked: boolean) => void) | undefinedNo default extracted.
Called when the checked state changes.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedDefault: false
Standard React/HTML attribute.
Accessibility
- Give every setting a visible label and check checked/disabled states with keyboard input.