Agrega un interruptor que los usuarios puedan activar o desactivar
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El componente Switch permite a los usuarios alternar entre dos estados: marcado y desmarcado. Usa un interruptor para permitir que el usuario realice una de las siguientes acciones:
Activa o desactiva un parámetro de configuración.
Habilita o inhabilita una función.
Selecciona una opción.
El componente tiene dos partes: el pulgar y la pista. El pulgar es la parte del interruptor que se puede arrastrar, y la pista es el fondo. El usuario puede arrastrar el pulgar hacia la izquierda o la derecha para cambiar el estado del interruptor. También pueden presionar el interruptor para verificarlo y borrarlo.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Cómo implementar un interruptor
El siguiente ejemplo es una implementación mínima del elemento componible Switch:
Resultados
Figura 1: Un interruptor sin marcar.Figura 2: Un interruptor marcado.
Crea una miniatura personalizada
Puedes pasar cualquier elemento componible para el parámetro thumbContent para crear una miniatura personalizada. El siguiente es un ejemplo de un interruptor que usa un ícono personalizado para su miniatura:
Resultados
El aspecto sin marcar es el mismo que el ejemplo de la sección anterior. Sin embargo, cuando se verifica, esta implementación aparece de la siguiente manera:
Figura 3: Un interruptor con un ícono de verificación personalizado.
Usa colores personalizados
Usa el parámetro colors para cambiar el color del botón y la barra de un interruptor, teniendo en cuenta si el interruptor está marcado.
Resultados
Figura 4: Un interruptor con colores personalizados.
Puntos clave
Parámetros básicos:
checked: Es el estado inicial del interruptor.
onCheckedChange: Es una devolución de llamada a la que se llama cuando cambia el estado del interruptor.
enabled: Indica si el interruptor está habilitado o inhabilitado.
colors: Son los colores que se usan para el interruptor.
Parámetros avanzados
thumbContent: Úsalo para personalizar el aspecto del elemento de vista previa cuando se marque.
colors: Úsalo para personalizar el color de la pista y la miniatura.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Cómo mostrar componentes interactivos
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
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-05-08 (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-05-08 (UTC)"],[],[],null,["# Add a switch that users can toggle\n\n\u003cbr /\u003e\n\nThe [`Switch`](/reference/kotlin/androidx/compose/material3/package-summary#Switch(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SwitchColors,androidx.compose.foundation.interaction.MutableInteractionSource)) component lets users toggle between two states: checked\nand unchecked. Use a switch to let the user to do one of the\nfollowing:\n\n- Toggle a setting on or off.\n- Enable or disable a feature.\n- Select an option.\n\nThe component has two parts: the thumb and the track. The thumb is the draggable\npart of the switch, and the track is the background. The user can drag the thumb\nto the left or right to change the state of the switch. They can also tap the\nswitch to check and clear it.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nImplement a switch\n------------------\n\nThe following example is a minimal implementation of the `Switch` composable:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun SwitchMinimalExample() {\n var checked by remember { mutableStateOf(true) }\n\n Switch(\n checked = checked,\n onCheckedChange = {\n checked = it\n }\n )\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Switch.kt#L65-L75\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** An unchecked switch. **Figure 2.** A checked switch.\n\nCreate a custom thumb\n---------------------\n\nYou can pass any composable for the `thumbContent` parameter to create a custom\nthumb. The following is an example of a switch that uses a custom icon for its\nthumb:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun SwitchWithIconExample() {\n var checked by remember { mutableStateOf(true) }\n\n Switch(\n checked = checked,\n onCheckedChange = {\n checked = it\n },\n thumbContent = if (checked) {\n {\n Icon(\n imageVector = Icons.Filled.Check,\n contentDescription = null,\n modifier = Modifier.size(SwitchDefaults.IconSize),\n )\n }\n } else {\n null\n }\n )\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Switch.kt#L80-L101\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\nThe unchecked appearance is the same as the example in\nthe preceding section. However, when checked, this implementation appears as\nfollows:\n**Figure 3.** A switch with a custom checked icon.\n\nUse custom colors\n-----------------\n\nUse the `colors` parameter to\nchange the color of a switch's thumb and track, taking into account whether the\nswitch is checked.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun SwitchWithCustomColors() {\n var checked by remember { mutableStateOf(true) }\n\n Switch(\n checked = checked,\n onCheckedChange = {\n checked = it\n },\n colors = SwitchDefaults.colors(\n checkedThumbColor = MaterialTheme.colorScheme.primary,\n checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,\n uncheckedThumbColor = MaterialTheme.colorScheme.secondary,\n uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,\n )\n )\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Switch.kt#L129-L145\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 4.** A switch with custom colors.\n\nKey points\n----------\n\n- Basic parameters:\n\n - **`checked`**: The initial state of the switch.\n - **`onCheckedChange`**: A callback that is called when the state of the switch changes.\n - **`enabled`**: Whether the switch is enabled or disabled.\n - **`colors`**: The colors used for the switch.\n- Advanced parameters\n\n - **`thumbContent`**: Use this to customize the appearance of the thumb when it is checked.\n - **`colors`**: Use this to customize the color of the track and thumb.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
