Перемикач
Перемикач для миттєвого налаштування — сповіщення, темний режим, прапорці функцій — з необруталістичним оформленням у вигляді рамок і тіней.
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
Switch — двостановий перемикач: увімкнено або вимкнено, застосовується щойно перемикається, без кнопки submit. Побудований на компоненті Base UI Switch і оформлений за рецептом необруталізму: товсті рамки, різкі тіні та масивний шрифт.
Коли це стане в пригоді:
- Панелі налаштувань — сповіщення, темна тема, autoplay: уподобання з миттєвим ефектом.
- Feature flags — увімкнути beta-функцію або перемкнути місячну/річну оплату.
- Контроли в рядках — активувати чи призупинити елементи в таблиці чи списку без відкриття форми.
Встановлення#
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
Установіть наведені залежності:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Скопіюйте та вставте наведений код у свій проєкт.
"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 }
Оновіть шляхи імпорту відповідно до налаштувань вашого проєкту.
Використання#
import { Switch } from "@/components/ui/switch"<Switch />Приклади#
Опис#
import {
Field,
FieldContent,Картка вибору#
Вибір у стилі картки, де FieldLabel обгортає весь Field, створюючи клікабельну картку.
import {
Field,
FieldContent,Вимкнено#
Додайте властивість disabled до компонента Switch, щоб вимкнути перемикач. Додайте властивість data-disabled до компонента Field для стилізації.
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
Недопустимо#
Додайте властивість aria-invalid до компонента Switch, щоб позначити недопустимий стан. Додайте властивість data-invalid до компонента Field для стилізації.
import {
Field,
FieldContent,Розмір#
Використовуйте властивість size, щоб змінити розмір перемикача.
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
RTL#
Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник із налаштування RTL.
"use client"
import * as React from "react"Доступність#
Switch відповідає патерну WAI-ARIA Switch: рендерить справжню кнопку з role="switch" і aria-checked плюс прихований input, щоб значення відправлялося з навколишньою формою.
Клавіатурні взаємодії:
| Клавіша | Дія |
|---|---|
Tab / Shift + Tab | Переносить фокус на switch або з нього |
Space | Перемикає switch |
Enter | Перемикає switch |
Довідник API#
Перегляньте документацію Base UI Switch.