Surface | API reference | Android Developers (original) (raw)

Functions summary

Unit	@Composable Surface( modifier: Modifier, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, elevation: Dp, content: @Composable () -> Unit) Material Design surface	Cmn
Unit	@ExperimentalMaterialApi@Composable Surface( onClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, elevation: Dp, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit) Material surface is the central metaphor in material design.	Cmn
Unit	@ExperimentalMaterialApi@Composable Surface( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, elevation: Dp, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit) Material surface is the central metaphor in material design.	Cmn
Unit	@ExperimentalMaterialApi@Composable Surface( selected: Boolean, onClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, elevation: Dp, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit) Material surface is the central metaphor in material design.	Cmn

Functions

Surface

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: @Composable () -> Unit
): Unit

Material Design surface

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface casts shadows.

See the other overloads for clickable, selectable, and toggleable surfaces.

The Surface is responsible for:

Clipping: Surface clips its children to the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29)
Elevation: Surface draws a shadow to represent depth, where [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) represents the depth of this surface. If the passed [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) is concave the shadow will not be drawn on Android versions less than 10.
Borders: If [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) has a border, then it will also be drawn.
Background: Surface fills the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) with the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), the [ElevationOverlay](/reference/kotlin/androidx/compose/material/ElevationOverlay) from [LocalElevationOverlay](/reference/kotlin/androidx/compose/material/package-summary#LocalElevationOverlay%28%29) will be used to apply an overlay - by default this will only occur in dark theme. The color of the overlay depends on the [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) of this Surface, and the [LocalAbsoluteElevation](/reference/kotlin/androidx/compose/material/package-summary#LocalAbsoluteElevation%28%29) set by any parent surfaces. This ensures that a Surface never appears to have a lower elevation overlay than its ancestors, by summing the elevation of all previous Surfaces.
Content color: Surface uses [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) to specify a preferred color for the content of this surface - this is used by the [Text](/reference/kotlin/androidx/compose/material/Text.composable#Text%28kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle%29) and [Icon](/reference/kotlin/androidx/compose/material/Icon.composable#Icon%28androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color%29) components as a default color.
Blocking touch propagation behind the surface.

If no [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) is set, this surface will try and match its background color to a color defined in the theme [Colors](/reference/kotlin/androidx/compose/material/Colors), and return the corresponding content color. For example, if the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) of this surface is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) will be set to [Colors.onSurface](/reference/kotlin/androidx/compose/material/Colors#onSurface%28%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) is not part of the theme palette, [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0%29) will keep the same value set above this Surface.

import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.material.Text

Surface(color = MaterialTheme.colors.background) { Text("Text color is onBackground") }

To modify these default style values used by text, use [ProvideTextStyle](/reference/kotlin/androidx/compose/material/ProvideTextStyle.composable#ProvideTextStyle%28androidx.compose.ui.text.TextStyle,kotlin.Function0%29) or explicitly pass a new [TextStyle](/reference/kotlin/androidx/compose/ui/text/TextStyle) to your text.

To manually retrieve the content color inside a surface, use [LocalContentColor](/reference/kotlin/androidx/compose/material/package-summary#LocalContentColor%28%29).

Parameters
modifier: Modifier = Modifier	Modifier to be applied to the layout corresponding to the surface
shape: Shape = RectangleShape	Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors.surface	The background color. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color)	The preferred content color provided by this Surface to its children. Defaults to either the matching content color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: BorderStroke? = null	Optional border to draw on top of the surface
elevation: Dp = 0.dp	The size of the shadow below the surface. Note that It will not affect z index of the Surface. If you want to change the drawing order you can use Modifier.zIndex.
content: @Composable () -> Unit	The content to be displayed on this Surface

Surface

@ExperimentalMaterialApi
@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This version of Surface is responsible for a click handling as well al everything else that a regular Surface does:

This clickable Surface is responsible for:

Clipping: Surface clips its children to the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29)
Elevation: Surface draws a shadow to represent depth, where [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) represents the depth of this surface. If the passed [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is convex the shadow will not be drawn on Android versions less than 10.
Borders: If [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) has a border, then it will also be drawn.
Background: Surface fills the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) with the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), the [ElevationOverlay](/reference/kotlin/androidx/compose/material/ElevationOverlay) from [LocalElevationOverlay](/reference/kotlin/androidx/compose/material/package-summary#LocalElevationOverlay%28%29) will be used to apply an overlay - by default this will only occur in dark theme. The color of the overlay depends on the [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) of this Surface, and the [LocalAbsoluteElevation](/reference/kotlin/androidx/compose/material/package-summary#LocalAbsoluteElevation%28%29) set by any parent surfaces. This ensures that a Surface never appears to have a lower elevation overlay than its ancestors, by summing the elevation of all previous Surfaces.
Content color: Surface uses [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) to specify a preferred color for the content of this surface - this is used by the [Text](/reference/kotlin/androidx/compose/material/Text.composable#Text%28kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle%29) and [Icon](/reference/kotlin/androidx/compose/material/Icon.composable#Icon%28androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color%29) components as a default color. If no [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is set, this surface will try and match its background color to a color defined in the theme [Colors](/reference/kotlin/androidx/compose/material/Colors), and return the corresponding content color. For example, if the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) of this surface is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) will be set to [Colors.onSurface](/reference/kotlin/androidx/compose/material/Colors#onSurface%28%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is not part of the theme palette, [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) will keep the same value set above this Surface.
Click handling. This version of surface will react to the clicks, calling [onClick](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) lambda, updating the [interactionSource](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) when [androidx.compose.foundation.interaction.PressInteraction](/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction) occurs, and showing ripple indication in response to press events. If you don't need click handling, consider using the Surface function that doesn't require [onClick](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) param.
Semantics for clicks. Just like with [Modifier.clickable](/reference/kotlin/androidx/compose/foundation/package-summary#%28androidx.compose.ui.Modifier%29.clickable%28kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0%29), clickable version of Surface will produce semantics to indicate that it is clicked. No semantic role is set by default, you may specify one by passing a desired [androidx.compose.ui.semantics.Role](/reference/kotlin/androidx/compose/ui/semantics/Role) with a [Modifier.semantics](/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#%28androidx.compose.ui.Modifier%29.semantics%28kotlin.Boolean,kotlin.Function1%29).

import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember

var count by remember { mutableStateOf(0) } Surface(onClick = { count++ }, color = MaterialTheme.colors.background) { Text("Clickable surface Text with onBackground color and count: $count") }

To manually retrieve the content color inside a surface, use [LocalContentColor](/reference/kotlin/androidx/compose/material/package-summary#LocalContentColor%28%29).

Parameters
onClick: () -> Unit	callback to be called when the surface is clicked
modifier: Modifier = Modifier	Modifier to be applied to the layout corresponding to the surface
enabled: Boolean = true	Controls the enabled state of the surface. When false, this surface will not be clickable
shape: Shape = RectangleShape	Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors.surface	The background color. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color)	The preferred content color provided by this Surface to its children. Defaults to either the matching content color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: BorderStroke? = null	Optional border to draw on top of the surface
elevation: Dp = 0.dp	The size of the shadow below the surface. Note that It will not affect z index of the Surface. If you want to change the drawing order you can use Modifier.zIndex.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit	The content to be displayed on this Surface

Surface

@ExperimentalMaterialApi
@Composable
fun Surface(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This version of Surface is responsible for a toggling its checked state as well as everything else that a regular Surface does:

This toggleable Surface is responsible for:

Clipping: Surface clips its children to the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29)
Elevation: Surface draws a shadow to represent depth, where [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) represents the depth of this surface. If the passed [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is convex the shadow will not be drawn on Android versions less than 10.
Borders: If [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) has a border, then it will also be drawn.
Background: Surface fills the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) with the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), the [ElevationOverlay](/reference/kotlin/androidx/compose/material/ElevationOverlay) from [LocalElevationOverlay](/reference/kotlin/androidx/compose/material/package-summary#LocalElevationOverlay%28%29) will be used to apply an overlay - by default this will only occur in dark theme. The color of the overlay depends on the [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) of this Surface, and the [LocalAbsoluteElevation](/reference/kotlin/androidx/compose/material/package-summary#LocalAbsoluteElevation%28%29) set by any parent surfaces. This ensures that a Surface never appears to have a lower elevation overlay than its ancestors, by summing the elevation of all previous Surfaces.
Content color: Surface uses [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) to specify a preferred color for the content of this surface - this is used by the [Text](/reference/kotlin/androidx/compose/material/Text.composable#Text%28kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle%29) and [Icon](/reference/kotlin/androidx/compose/material/Icon.composable#Icon%28androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color%29) components as a default color. If no [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is set, this surface will try and match its background color to a color defined in the theme [Colors](/reference/kotlin/androidx/compose/material/Colors), and return the corresponding content color. For example, if the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) of this surface is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) will be set to [Colors.onSurface](/reference/kotlin/androidx/compose/material/Colors#onSurface%28%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is not part of the theme palette, [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) will keep the same value set above this Surface.
Click handling. This version of surface will react to the check toggles, calling [onCheckedChange](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) lambda, updating the [interactionSource](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) when [androidx.compose.foundation.interaction.PressInteraction](/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction) occurs, and showing ripple indication in response to press events. If you don't need check handling, consider using a Surface function that doesn't require [onCheckedChange](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) param.
Semantics for toggle. Just like with [Modifier.toggleable](/reference/kotlin/androidx/compose/foundation/selection/package-summary#%28androidx.compose.ui.Modifier%29.toggleable%28kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1%29), toggleable version of Surface will produce semantics to indicate that it is checked. No semantic role is set by default, you may specify one by passing a desired [androidx.compose.ui.semantics.Role](/reference/kotlin/androidx/compose/ui/semantics/Role) with a [Modifier.semantics](/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#%28androidx.compose.ui.Modifier%29.semantics%28kotlin.Boolean,kotlin.Function1%29).

var checked by remember { mutableStateOf(false) } Surface( checked = checked, onCheckedChange = { checked = !checked }, color = if (checked) { MaterialTheme.colors.primary } else { MaterialTheme.colors.background }, ) { Text(text = if (checked) "ON" else "OFF", textAlign = TextAlign.Center) }

To manually retrieve the content color inside a surface, use [LocalContentColor](/reference/kotlin/androidx/compose/material/package-summary#LocalContentColor%28%29).

Parameters
checked: Boolean	whether or not this Surface is toggled on or off
onCheckedChange: (Boolean) -> Unit	callback to be invoked when the toggleable Surface is clicked
modifier: Modifier = Modifier	Modifier to be applied to the layout corresponding to the surface
enabled: Boolean = true	Controls the enabled state of the surface. When false, this surface will not be selectable
shape: Shape = RectangleShape	Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors.surface	The background color. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color)	The preferred content color provided by this Surface to its children. Defaults to either the matching content color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: BorderStroke? = null	Optional border to draw on top of the surface
elevation: Dp = 0.dp	The size of the shadow below the surface. Note that It will not affect z index of the Surface. If you want to change the drawing order you can use Modifier.zIndex.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit	The content to be displayed on this Surface

Surface

@ExperimentalMaterialApi
@Composable
fun Surface(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This version of Surface is responsible for a selection handling as well as everything else that a regular Surface does:

This selectable Surface is responsible for:

Clipping: Surface clips its children to the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29)
Elevation: Surface draws a shadow to represent depth, where [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) represents the depth of this surface. If the passed [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is convex the shadow will not be drawn on Android versions less than 10.
Borders: If [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) has a border, then it will also be drawn.
Background: Surface fills the shape specified by [shape](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) with the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), the [ElevationOverlay](/reference/kotlin/androidx/compose/material/ElevationOverlay) from [LocalElevationOverlay](/reference/kotlin/androidx/compose/material/package-summary#LocalElevationOverlay%28%29) will be used to apply an overlay - by default this will only occur in dark theme. The color of the overlay depends on the [elevation](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) of this Surface, and the [LocalAbsoluteElevation](/reference/kotlin/androidx/compose/material/package-summary#LocalAbsoluteElevation%28%29) set by any parent surfaces. This ensures that a Surface never appears to have a lower elevation overlay than its ancestors, by summing the elevation of all previous Surfaces.
Content color: Surface uses [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) to specify a preferred color for the content of this surface - this is used by the [Text](/reference/kotlin/androidx/compose/material/Text.composable#Text%28kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle%29) and [Icon](/reference/kotlin/androidx/compose/material/Icon.composable#Icon%28androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color%29) components as a default color. If no [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is set, this surface will try and match its background color to a color defined in the theme [Colors](/reference/kotlin/androidx/compose/material/Colors), and return the corresponding content color. For example, if the [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) of this surface is [Colors.surface](/reference/kotlin/androidx/compose/material/Colors#surface%28%29), [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) will be set to [Colors.onSurface](/reference/kotlin/androidx/compose/material/Colors#onSurface%28%29). If [color](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) is not part of the theme palette, [contentColor](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) will keep the same value set above this Surface.
Click handling. This version of surface will react to the clicks, calling [onClick](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) lambda, updating the [interactionSource](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) when [androidx.compose.foundation.interaction.PressInteraction](/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction) occurs, and showing ripple indication in response to press events. If you don't need click handling, consider using the Surface function that doesn't require [onClick](/reference/kotlin/androidx/compose/material/package-summary#Surface%28kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0%29) param.
Semantics for selection. Just like with [Modifier.selectable](/reference/kotlin/androidx/compose/foundation/selection/package-summary#%28androidx.compose.ui.Modifier%29.selectable%28kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0%29), selectable version of Surface will produce semantics to indicate that it is selected. No semantic role is set by default, you may specify one by passing a desired [androidx.compose.ui.semantics.Role](/reference/kotlin/androidx/compose/ui/semantics/Role) with a [Modifier.semantics](/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#%28androidx.compose.ui.Modifier%29.semantics%28kotlin.Boolean,kotlin.Function1%29).

var selected by remember { mutableStateOf(false) } Surface( selected = selected, onClick = { selected = !selected }, color = MaterialTheme.colors.background, ) { Text(text = if (selected) "Selected" else "Not Selected", textAlign = TextAlign.Center) }

To manually retrieve the content color inside a surface, use [LocalContentColor](/reference/kotlin/androidx/compose/material/package-summary#LocalContentColor%28%29).

Parameters
selected: Boolean	whether this Surface is selected
onClick: () -> Unit	callback to be called when the surface is clicked
modifier: Modifier = Modifier	Modifier to be applied to the layout corresponding to the surface
enabled: Boolean = true	Controls the enabled state of the surface. When false, this surface will not be selectable
shape: Shape = RectangleShape	Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors.surface	The background color. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color)	The preferred content color provided by this Surface to its children. Defaults to either the matching content color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: BorderStroke? = null	Optional border to draw on top of the surface
elevation: Dp = 0.dp	The size of the shadow below the surface. Note that It will not affect z index of the Surface. If you want to change the drawing order you can use Modifier.zIndex.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit	The content to be displayed on this Surface