メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

コンポーネントの切り替え

最終更新日:

CSS のみの Tailwind CSS トグル スイッチで、プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションを備えています。サイズはXS〜XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

トグル コンポーネントは、ユーザーが機能や設定をオンまたはオフにできるバイナリ スイッチです。ネイティブ HTML チェックボックス入力で構築され、Tailwind CSS アニメーションで強化されたトグルは、ブール状態を制御する直感的な方法を提供します。 Frutjam トグル システムは、複数の色、サイズ、無効状態をサポートしており、設定パネル、機能フラグ、環境設定コントロールに最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
toggleベースアニメーションのオン/オフ スイッチ入力
toggle-xsサイズ極小
toggle-smサイズ小さい
toggle-mdサイズ中 (デフォルト)
toggle-lgサイズ大きい
toggle-xlサイズ特大
toggle-primary色主要なテーマカラー
toggle-secondary色二次テーマカラー
toggle-accent色アクセントのテーマカラー
toggle-neutral色ニュートラルなテーマカラー
toggle-info色情報セマンティックカラー
toggle-success色成功のセマンティックカラー
toggle-warning色警告セマンティックカラー
toggle-error色エラー セマンティック カラー

基本的な使い方

1
2
<input type="checkbox" class="toggle">
<input type="checkbox" class="toggle" checked>

1
2
<input type="checkbox" className="toggle">
<input type="checkbox" className="toggle" checked>

サイズの切り替え

html 
1
2
3
4
5
<input type="checkbox" class="toggle toggle-xs">
<input type="checkbox" class="toggle toggle-sm">
<input type="checkbox" class="toggle toggle-md">
<input type="checkbox" class="toggle toggle-lg">
<input type="checkbox" class="toggle toggle-xl">

色の切り替え

html 
1
2
3
4
5
6
7
8
<input type="checkbox" class="toggle" checked>
<input type="checkbox" class="toggle toggle-primary" checked>
<input type="checkbox" class="toggle toggle-secondary" checked>
<input type="checkbox" class="toggle toggle-accent" checked>
<input type="checkbox" class="toggle toggle-info" checked>
<input type="checkbox" class="toggle toggle-success" checked>
<input type="checkbox" class="toggle toggle-warning" checked>
<input type="checkbox" class="toggle toggle-error" checked>

無効トグル

html 
1
2
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>

ラベルで切り替え

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-primary" checked>
  <span>Enable notifications</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-success" checked>
  <span>Dark mode</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-warning">
  <span>Analytics</span>
</label>

状態の切り替え

Off

On

Disabled

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="flex gap-4 items-center">
  <div>
    <p class="text-sm font-medium mb-2">Off</p>
    <input type="checkbox" class="toggle toggle-primary">
  </div>
  <div>
    <p class="text-sm font-medium mb-2">On</p>
    <input type="checkbox" class="toggle toggle-primary" checked>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Disabled</p>
    <input type="checkbox" class="toggle toggle-primary" disabled>
  </div>
</div>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な トグル クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる