Size grid

A row of size tiles for a single choice with a disabled sold-out option.

XSSMLXL

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun SizeSelect() {
    val sizes = listOf("XS", "S", "M", "L", "XL")
    val soldOut = setOf("XS")
    var selected by remember { mutableStateOf("M") }
    Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        sizes.forEach { s ->
            val out = s in soldOut
            val on = s == selected
            Surface(
                onClick = { if (!out) selected = s },
                enabled = !out,
                shape = MaterialTheme.shapes.medium,
                color = if (on) MaterialTheme.colorScheme.primary
                    else MaterialTheme.colorScheme.surface,
                border = BorderStroke(1.dp,
                    if (on) MaterialTheme.colorScheme.primary
                    else MaterialTheme.colorScheme.outlineVariant),
            ) {
                Text(
                    s, Modifier.padding(horizontal = 14.dp, vertical = 10.dp),
                    color = when {
                        on -> MaterialTheme.colorScheme.onPrimary
                        out -> MaterialTheme.colorScheme.outline
                        else -> MaterialTheme.colorScheme.onSurface
                    },
                    style = MaterialTheme.typography.labelLarge,
                )
            }
        }
    }
}