チップの切り替え
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ToggleChip は、ユーザーがさまざまなオプションを選択できる特別なチップです。
切り替えチップには、2 つの状態の切り替えコントロールが含まれます。2 状態の切り替えコントロールの例には、スイッチ、ラジオボタン、チェックボックスなどがあります。切り替えチップは、[設定] などで、多くのオプションをすばやく簡単に設定する必要がある場合に使用します。
構造
切り替えチップには、2 つのテキストラベル、1 つの選択コントロール、1 つのアプリケーション アイコンを表示する 4 つのスロットがあります。アイコンとセカンダリ ラベルは省略可能です。
A. ラベル
B. セカンダリ ラベル
C. アイコン
D. 選択コントロール
E. コンテナ
チップのグラデーションを切り替え
上/左 = 0% サーフェス
下/右 = 50% プライマリ
（サーフェス カラーの背景にグラデーション オーバーレイ）
選択コントロール
Switch
スイッチを使用して選択項目をオンまたはオフにします。
ラジオボタン
ラジオボタンは、ユーザーがオプションを 1 つしか選択できないリストで使用します。
Checkbox
チェックボックスは、ユーザーがオプションを複数選択できるリストで使用します。
分割の切り替えチップ
2 つのタップ可能な領域が必要な場合は、分割切り替えチップを使用します。
Split ToggleChip
SplitToggleChip と ToggleChip には、タップ可能な領域が 2 つあります。1 つはクリック可能な領域、もう 1 つは切り替えありです。
分割された切り替えチップでは、各セクションを別の色にして、タップ可能な背景領域と切り替えコントロールを区別します。
Usage
以下の例のように ToggleChip を使用します。
アダプティブ レイアウト
レスポンシブ動作
ToggleChips は、大きなディスプレイで利用可能な幅いっぱいまで引き伸ばします。
アイコン（24 x 24 dp）
コンテナ（52 x XX dp）
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Toggle chips\n\nA [ToggleChip](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleChip(kotlin.Boolean,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ToggleChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,kotlin.Function0)) is a specialized chip that allows users to select various options. \nToggle chips include a bi-state toggle control. Some examples of a bi-state toggle control include a switch, radio button, or checkbox. Use toggle chips for situations in which many options may need to be quickly and easily set, such as in Settings.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nToggle chips have four slots that accommodate two text labels, one selection control and one application icon. The icon and secondary label are optional.\n\n**A. Label\nB. Secondary label\nC. Icon\nD. Selection control\nE. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nToggle Chips Gradient\n---------------------\n\nTop/Left = 0% Surface \n\nBottom/Right = 50% Primary \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSelection control\n-----------------\n\n**Switch**\n\nUse a switch to turn a selection on or off.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Radio button**\n\nUse radio buttons in lists where the user can select only one option.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Checkbox**\n\nUse checkboxes in lists where the user can select multiple options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Split toggle chips**\n\nUse split toggle chips when you want two tappable areas.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Split ToggleChips**\n\nThe SplitToggleChip differs from the ToggleChip by having two tappable areas, one clickable and one with the toggle. \n\n\nOn split toggle chips, differentiate between the tappable background area and the toggle control by making each section a different color.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse ToggleChips as shown in the following examples.\n\nAdaptive layouts\n----------------\n\n**Responsive behavior**\n\nToggleChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
