---
title: "layoutId"
description: "Tag the element with [layoutId] to identify the element within its parent."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.layoutId(layoutId: Any) = this then LayoutIdElement(layoutId = layoutId)
```


Tag the element with `layoutId` to identify the element within its parent.



## Code Examples
### LayoutTagChildrenUsage
```kotlin
@Composable
fun LayoutTagChildrenUsage(header: @Composable () -> Unit, footer: @Composable () -> Unit) {
    Layout({
        // Here the Containers are only needed to apply the modifiers. You could use the
        // modifier on header and footer directly if they are composables accepting modifiers.
        Box(Modifier.layoutId("header")) { header() }
        Box(Modifier.layoutId("footer")) { footer() }
    }) { measurables, constraints ->
        val placeables =
            measurables.map { measurable ->
                when (measurable.layoutId) {
                    // You should use appropriate constraints. Here we measure fake constraints.
                    "header" -> measurable.measure(Constraints.fixed(100, 100))
                    "footer" -> measurable.measure(constraints)
                    else -> error("Unexpected tag")
                }
            }
        // Size should be derived from children measured sizes on placeables,
        // but this is simplified for the purposes of the example.
        layout(100, 100) { placeables.forEach { it.placeRelative(0, 0) } }
    }
}
```