Switch

オン/オフを切り替えるトグルスイッチ。

インストール

import { Switch } from "@ginga-ui/core";

基本的な使い方

シンプルなスイッチの使用例です。

export function BasicExample() {
  return <Switch>通知を許可</Switch>;
}

選択済み

初期状態でオンになっているスイッチです。

export function SelectedExample() {
  return <Switch selected>デフォルトでオン</Switch>;
}

無効化

無効化されたスイッチの例です。

export function DisabledExample() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <Switch disabled>無効化(オフ)</Switch>
      <Switch disabled selected>
        無効化(オン)
      </Switch>
    </div>
  );
}

制御されたスイッチ

状態を外部から制御するスイッチです。

export function ControlledExample() {
  return (
    <Switch onChange={(isSelected) => console.log("状態:", isSelected)}>
      ダークモード
    </Switch>
  );
}