スイッチ

React Aria - ネイティブトグルセマティクス、キーボードサポート、フォーカスビジュアルリングに組み込まれたアクセス可能なトグルスイッチ。 3つのサイズの2つの形状(ピルと長方形)。オン状態は、インセットリングと小さな青いチップでプライマリグラデーションを使用し、親指でエンボス加工し、Fima 1:1をマッチングします。

インストール

CLI または手動でこのスイッチコンポーネントを追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add switch

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

シェイプ

2つの形を経由して shape プロップ。 pill (デフォルト) は完全に丸みを帯びています。 rectangle 利用条件 radius/md トラックおよびトラックで radius/xs 親指では、サイズごとにスケーリングされます。親指の内部チップは同じ形状に従います。

<Switch shape="pill" defaultSelected /> {/* fully rounded (default) */}

サイズ

3つのサイズを経由して size プロップ - lg (56×32), md (42×24、デフォルト) sm (28×16). 親指, パディング, 旅行距離とオンステートリングが一緒にすべてのスケール.

<Switch size="lg" defaultSelected /> {/* 56 × 32 */}

米国及びラベル

利用条件 isSelected + onChange 制御スイッチのため、または defaultSelected 制御不能のため。 isDisabled 制御を50%に薄暗くして下さい。渡して下さい children ラベルのために - React Aria は入力とそれを関連付けるので、テキストをクリックしてスイッチを切り替えます。

{/* Controlled */}<Switch isSelected={enabled} onChange={setEnabled} />
{/* Disabled */}<Switch isDisabled defaultSelected />
{/* With label (react-aria associates it automatically) */}<Switch>Auto-sync to cloud</Switch>

カード

選択可能な設定カード - オプションの24×24の大手アイコン、タイトルと左側の短い説明、および右側のスイッチ。カード全体がホバーの背景を切り替えて表示し、スイッチが対比する CheckboxCard. Remix アイコンを経由して渡す icon とりあえず SwitchCard.

プッシュ通知をプッシュ重要な活動のアラート。週刊ダイジェスト毎週月曜日を要します。ダークモード

import { RiNotification4Line, RiMoonLine } from "@remixicon/react";import { SwitchCard } from "@/components/base/switch/switch-card";
export function Example() {  return (    <div className="flex max-w-md flex-col gap-4">      <SwitchCard        icon={RiNotification4Line}        title="Push notifications"        description="Get notified when something needs your attention."        defaultSelected      />      {/* icon is optional - pass the component reference, not <RiMoonLine /> */}      <SwitchCard icon={RiMoonLine} title="Dark mode" />    </div>  );}