Search Input

The SearchInput component provides a specialized text input for search functionality with built-in search styling and query handling capabilities.

Usage

Basic Search Input

SearchInput(
    modifier = Modifier.fillMaxWidth(),
    placeholderText = "Search...",
    onQueryChanged = { query ->
        // Handle search query
        performSearch(query)
    }
)

Search with Custom Placeholder

SearchInput(
    modifier = Modifier.fillMaxWidth(),
    placeholderText = "Search for products, brands, or categories...",
    onQueryChanged = { query ->
        if (query.length >= 3) {
            searchProducts(query)
        }
    }
)

Search with Query Validation

var searchQuery by remember { mutableStateOf("") }

Column {
    SearchInput(
        modifier = Modifier.fillMaxWidth(),
        placeholderText = "Type to search...",
        onQueryChanged = { query ->
            searchQuery = query
            if (query.length >= 3) {
                performSearch(query)
            }
        }
    )

    if (searchQuery.isNotEmpty() && searchQuery.length < 3) {
        Text(
            text = "Type at least 3 characters",
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.error
        )
    }
}

Multiple Search Inputs

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    SearchInput(
        modifier = Modifier.fillMaxWidth(),
        placeholderText = "Search users...",
        onQueryChanged = { searchUsers(it) }
    )

    SearchInput(
        modifier = Modifier.fillMaxWidth(),
        placeholderText = "Search messages...",
        onQueryChanged = { searchMessages(it) }
    )

    SearchInput(
        modifier = Modifier.fillMaxWidth(),
        placeholderText = "Search files...",
        onQueryChanged = { searchFiles(it) }
    )
}

Search with Real-time Results

var query by remember { mutableStateOf("") }
var results by remember { mutableStateOf(emptyList<String>()) }

LaunchedEffect(query) {
    if (query.isNotEmpty()) {
        // Debounce search
        delay(300)
        results = performSearch(query)
    } else {
        results = emptyList()
    }
}

Column {
    SearchInput(
        modifier = Modifier.fillMaxWidth(),
        placeholderText = "Search...",
        onQueryChanged = { query = it }
    )

    LazyColumn {
        items(results) { result ->
            Text(text = result)
        }
    }
}