Bỏ qua đến nội dung
1.6k

Công tắc

Một nút gạt bật/tắt để điều chỉnh cài đặt ngay lập tức — thông báo, chế độ tối, các tính năng thử nghiệm — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp giữa đường viền và bóng đổ.

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

Switch là một công tắc hai trạng thái — bật hoặc tắt, có hiệu lực ngay khoảnh khắc gạt, không cần nút gửi. Được xây dựng trên thành phần Base UI Switch và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

  • Bảng cài đặt — thông báo, chế độ tối, tự động phát: các tùy chọn có hiệu lực ngay lập tức.
  • Cờ tính năng — bật một tính năng beta hoặc chuyển giữa thanh toán theo tháng và theo năm.
  • Điều khiển theo từng hàng — kích hoạt hoặc tạm dừng các mục trong bảng hay danh sách mà không cần mở form.

Cài đặt

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
npx shadcn@latest add https://neobrutalism.com/r/base/switch.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json

Cài đặt các dependency sau:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Sao chép và dán đoạn mã sau vào dự án của bạn.

components/ui/switch.tsx
"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 }

Cập nhật các đường dẫn import cho phù hợp với cấu hình dự án của bạn.

Cách dùng

import { Switch } from "@/components/ui/switch"
<Switch />

Ví dụ

Mô tả

import {
  Field,
  FieldContent,

Thẻ Lựa Chọn

Lựa chọn theo kiểu thẻ, trong đó FieldLabel bao bọc toàn bộ Field để tạo một mẫu thẻ có thể nhấp.

import {
  Field,
  FieldContent,

Vô hiệu hóa

Thêm prop disabled vào component Switch để vô hiệu hóa switch. Thêm prop data-disabled vào component Field để tạo kiểu.

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

Không hợp lệ

Thêm prop aria-invalid vào component Switch để cho biết trạng thái không hợp lệ. Thêm prop data-invalid vào component Field để tạo kiểu.

import {
  Field,
  FieldContent,

Kích thước

Dùng prop size để thay đổi kích thước của switch.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

RTL

Để bật hỗ trợ RTL trong Neobrutalism, xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập

Switch tuân theo mẫu Switch của WAI-ARIA: nó render một nút thật với role="switch" và aria-checked, kèm một input ẩn để giá trị được gửi cùng form bao quanh.

Tương tác bàn phím:

PhímHành động
Tab / Shift + TabDi chuyển focus vào / ra khỏi switch
SpaceBật/tắt switch
EnterBật/tắt switch

Tham chiếu API

Xem tài liệu Base UI Switch.