Chips de activación
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Un ToggleChip es un chip especializado que permite a los usuarios seleccionar varias opciones.
Los chips de activación incluyen un control de activación de dos estados. Algunos ejemplos de un control de activación de dos estados incluyen un interruptor, un botón de selección o una casilla de verificación. Usa los chips de activación para situaciones en las que se deban establecer muchas opciones de forma rápida y fácil, como en Configuración.
Anatomía
Los chips de activación tienen cuatro espacios que admiten dos etiquetas de texto, un control de selección y un ícono de la aplicación. El ícono y la etiqueta secundaria son opcionales.
A. Etiqueta
B. Etiqueta secundaria
C. Ícono
D. Control de selección
E. Contenedor
Activar o desactivar gradiente de chips
Superior/Izquierda = 0% de superficie
Parte inferior/derecha = 50% principal
(superposiciones de gradiente sobre un fondo de color de superficie)
Control de selección
Switch
Usa un interruptor para activar o desactivar una selección
Botón de selección
Usa botones de selección en listas en las que el usuario pueda seleccionar solo una opción.
Checkbox
Usa casillas de verificación en las listas en las que el usuario puede seleccionar varias opciones.
Chips de activación divididos
Usa chips de activación divididos cuando quieras dos áreas que se puedan presionar.
Chips de activación divididos
SplitToggleChip se diferencia de ToggleChip, ya que tiene dos áreas que se pueden presionar, una en la que se puede hacer clic y otra con el botón de activación.
En los chips de activación divididos, diferencia entre el área de fondo que se puede presionar y el control de activación haciendo que cada sección tenga un color diferente.
Uso
Usa ToggleChips, como se muestra en los siguientes ejemplos.
Diseños adaptables
Comportamiento responsivo
Los ToggleChips se estiran para llenar el ancho disponible en pantallas más grandes.
Ícono (24 x 24 dp)
Contenedor (52 x XX dp)
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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"]]
