Disclosures
Disclosuresanimated

FAQ list

A single-open FAQ list where each plus icon twists into a close.

Shipping

Free over 50, arrives in 2 to 4 business days.

Returns

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 FaqList(items: List<Pair<String, String>>) {
    var openIndex by remember { mutableStateOf(-1) }
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        items.forEachIndexed { i, (q, a) ->
            val open = i == openIndex
            val rotation by animateFloatAsState(
                if (open) 45f else 0f, label = "plus",
            )
            Surface(
                onClick = { openIndex = if (open) -1 else i },
                shape = MaterialTheme.shapes.medium,
                color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.4f),
            ) {
                Column(Modifier.padding(16.dp)) {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Text(
                            q,
                            modifier = Modifier.weight(1f),
                            style = MaterialTheme.typography.titleSmall,
                        )
                        Icon(Icons.Filled.Add, null, Modifier.rotate(rotation))
                    }
                    AnimatedVisibility(open) {
                        Text(
                            a,
                            modifier = Modifier.padding(top = 8.dp),
                            color = MaterialTheme.colorScheme.onSurfaceVariant,
                            style = MaterialTheme.typography.bodyMedium,
                        )
                    }
                }
            }
        }
    }
}