コンテンツへスキップ
1.6k

スイッチ

通知、ダークモード、機能フラグなどの設定を瞬時に切り替えられるオン／オフトグルで、ネオブルータリズム風の枠線と影の演出が施されています。

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

Switch はオン／オフの二状態トグルです。切り替えた瞬間に反映され、送信ボタンは不要です。Base UI Switch コンポーネント上に構築し、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、太字のタイポグラフィです。

次のような場面で使います：

  • 設定パネル — 通知、ダークモード、オートプレイなど、すぐ効く設定。
  • 機能フラグ — ベータ機能の有効化、月額／年額の切替。
  • 行ごとのコントロール — フォームを開かずに、テーブルやリストの項目を有効化／一時停止。

インストール

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

以下の依存関係をインストールしてください。

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

以下のコードをコピーしてプロジェクトに貼り付けてください。

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 }

インポートパスをプロジェクトの構成に合わせて更新してください。

使い方

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

使用例

説明

import {
  Field,
  FieldContent,

選択カード

FieldLabel が Field 全体を包み込み、クリック可能なカードパターンを実現するカード形式の選択です。

import {
  Field,
  FieldContent,

無効

スイッチを無効化するには、Switch コンポーネントに disabled プロパティを追加します。スタイルを適用するには、Field コンポーネントに data-disabled プロパティを追加します。

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

不正な値

不正な状態を示すには、Switch コンポーネントに aria-invalid プロパティを追加します。スタイルを適用するには、Field コンポーネントに data-invalid プロパティを追加します。

import {
  Field,
  FieldContent,

サイズ

size プロパティを使って、スイッチのサイズを変更できます。

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

RTL

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

アクセシビリティ

Switch は WAI-ARIA Switch パターン に従います。role="switch" と aria-checked 付きの本物のボタンを描画し、周囲のフォームと一緒に値が送れるよう非表示の input も付けます。

キーボード操作：

キー操作
Tab / Shift + Tabスイッチへ／からフォーカスを移動
Spaceスイッチを切り替え
Enterスイッチを切り替え

APIリファレンス

詳しくは Base UI のドキュメントをご覧ください。