Switch
An on/off toggle for instant settings — notifications, dark mode, feature flags — with the neobrutalist borders-and-shadows treatment.
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
The switch is a two-state toggle — on or off, applied the moment it flips, no submit button. Built on the Base UI Switch component and styled to the neobrutalist recipe: thick borders, hard shadows, and bold type.
Reach for it when:
- Settings panels — notifications, dark mode, autoplay: preferences that take effect immediately.
- Feature flags — enable a beta feature or flip between monthly and yearly billing.
- Per-row controls — activate or pause items in a table or list without opening a form.
Installation#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json
Install the following dependencies:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Switch({
className,
size = "default",
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default"
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
/>
</SwitchPrimitive.Root>
)
}
export { Switch }
Update the import paths to match your project setup.
Usage#
import { Switch } from "@/components/ui/switch"<Switch />Examples#
Description#
import {
Field,
FieldContent,Choice Card#
Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.
import {
Field,
FieldContent,Disabled#
Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
Invalid#
Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.
import {
Field,
FieldContent,Size#
Use the size prop to change the size of the switch.
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
RTL#
To enable RTL support in Neobrutalism.com, see the RTL configuration guide.
"use client"
import * as React from "react"Accessibility#
The switch follows the WAI-ARIA Switch pattern: it renders a real button with role="switch" and aria-checked, plus a hidden input so the value submits with a surrounding form.
Keyboard interactions:
| Key | Action |
|---|---|
Tab / Shift + Tab | Move focus to / away from the switch |
Space | Toggle the switch |
Enter | Toggle the switch |
API Reference#
See the Base UI Switch documentation.