CheToggle

CheToggle は、ON/OFF の二値状態を切り替えるためのスイッチコンポーネントです。shadcn/ui (base-nova) ベースで構築しており、内部では @base-ui/react の Switch を利用しています。

label props を指定するとラベル付きトグルとして表示されます。

基本

サイズは m（デフォルト）と s の 2 種類があります。

プレビュー

M Size

OFF
ON
Disabled OFF
Disabled ON

S Size

OFF
ON
Disabled OFF
Disabled ON

使用例

import { CheToggle } from "@sen-corporation/cheese-base";

// 基本
<CheToggle size="m" />

// デフォルトON
<CheToggle size="m" defaultChecked />

// 無効化
<CheToggle size="m" disabled />

// 小サイズ
<CheToggle size="s" />

ラベル付き

label props でラベルテキストを添えることができます。

プレビュー

使用例

import { CheToggle } from "@sen-corporation/cheese-base";

// ラベル付き
<CheToggle label="Notifications" size="m" />

// 無効化
<CheToggle label="Disabled" size="m" disabled />

Props

属性詳細型デフォルト必須
sizeトグルのサイズ"m" | "s""m"No
labelラベルテキストstring—No
checked制御された状態値boolean—No
defaultChecked初期状態（非制御時）booleanfalseNo
disabled無効化booleanfalseNo
onCheckedChange状態変更コールバック(checked: boolean, event: Event) => void—No

Controlled（インタラクティブデモ）

checked と onCheckedChange を使った制御コンポーネントパターンのデモです。トグル操作に応じて状態テキストがリアルタイムに更新されます。

State: OFF
 
import { useState } from "react";
import { CheToggle } from "@sen-corporation/cheese-base";

const Example = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <CheToggle size="m" checked={checked} onCheckedChange={setChecked} />
      <span>State: {checked ? "ON" : "OFF"}</span>
    </div>
  );
};