Biofarma | Bind UI

Search

Search is an interactive interface element that allows users to query and retrieve specific data.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Search Preview

Usage

To implement search, you can use this tag SearchInput in the Kotlin file.

    import id.co.biofarma.binduiandroid.components.search.Search

    var query by remember { mutableStateOf(
        TextFieldValue(text="A", selection = TextRange.Zero)) }
    val suggestions = listOf("Apple", "Banana", "Cherry", "Grape", "Durian", "Vet en hard")
    var isShowSuggestion by remember { mutableStateOf(true) }
 
    SearchInput(
        query = query,
        placeholder = "Search here...",
        size = "sm",
        onQueryChange = {
            newText ->
            query = if (disabled) TextFieldValue(text=value, selection = TextRange(value.length)) else newText
            isShowSuggestion = suggestions.any { it.contains(newText.text, ignoreCase = true) } && newText.text.isNotEmpty()
        },
        endIcon = null,
        isShowSuggestion = isShowSuggestion,
        suggestions = suggestions.filter { it.contains(query.text, ignoreCase = true) },
        onItemSelected = {
            query = TextFieldValue(it, selection = TextRange(it.length))
            isShowSuggestion = false
        },
        onClearText = {
            query = TextFieldValue("")
            isShowSuggestion = false
        },
        disabled = false,
    )

Example

Size

Set the size prop to sm, md or lg.

Search Size

Disabled

Set the disabled prop to true if you would like to set it disabled.

Search Disabled

Suggestion Search

Suggestion items are fetched from your array list in suggestion props. Pass the isShowSuggestion prop to true or false. Set true if you would like to display the suggestion on search.

Search Suggestion

To close the suggestion when you’ve selected an item, you could set isShowSuggestion to false in onItemSelected props.

Search onItemSelected

Search with End Icon (optional)

Pass the endIcon prop with Icon.

Search End Icon

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the component
query	false	-	`TextFieldValue`	Controlled input value that represents the current text in the search input field
size	false	-	`sm`, `md`, `lg`	The search input box size
placeholder	true	-	`string`	The search input placeholder text.
onQueryChange	false	-	`(TextFieldValue) -> Unit`	Callback function invoked when the text input value changes.
endIcon	false	-	`Composeable`	A composable function that describes the icon on the right search input.
isShowSuggestion	false	`false`	`true` `false`	Display suggestions list
suggestions	false	`[]`	`ArrayList<String>`	List of suggestions that appear when typing
onItemSelected	false	-	`(String) -> Unit`	Callback function invoked when a suggestion item is selected
onClearText	false	-	`() -> Unit`	Callback funtion to remove any value text selected
disabled	false	`false`	`true` `false`	If true, the search input will be set to disabled
modifier	false	-	`modifier`	To decorate or add behavior to Compose UI elements

Radio Button Select