Search Services

A service search screen with a filterable search field and a tappable list of suggested event categories.

9:41

Search Services

Suggestions

🎂Birthday

💍Anniversary

🎓Graduation

🎉Promotion

⏱️Countdowns

📋Metting

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

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchServicesScreen(suggestions: List<Pair<ImageVector, String>>, onBack: () -> Unit) {
    Scaffold(topBar = {
        TopAppBar(
            title = { Text("Search", fontWeight = FontWeight.Bold) },
            navigationIcon = {
                IconButton(onClick = onBack) {
                    Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
                }
            },
        )
    }) { padding ->
        Column(Modifier.fillMaxSize().padding(padding).padding(16.dp)) {
            OutlinedTextField(
                value = "", onValueChange = {},
                placeholder = { Text("Search Services") },
                leadingIcon = { Icon(Icons.Filled.Search, null) },
                trailingIcon = { Icon(Icons.Filled.Tune, null) },
                shape = RoundedCornerShape(14.dp),
                modifier = Modifier.fillMaxWidth(),
            )
            Text("Suggestions", Modifier.padding(top = 16.dp),
                style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
            suggestions.forEach { (icon, label) ->
                ListItem(
                    leadingContent = { Icon(icon, null) },
                    headlineContent = { Text(label) },
                    trailingContent = { Icon(Icons.Filled.NorthEast, null, Modifier.size(16.dp)) },
                )
                HorizontalDivider()
            }
        }
    }
}