Biofarma | Bind UI

Select

The Select feature enables users to choose an option from a list within a form field. By default, the first option in the list is displayed. However, you can also configure a different option to be pre-selected from the list.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Select Preview

Usage

import id.co.biofarma.binduiandroid.components.select.Select

  // options
  val options = listOf(
      DataOption("1", "Dokter Umum"),
      DataOption("2", "Dokter THT"),
      DataOption("3", "Dokter Gigi"),
      DataOption("4", "Dokter Bedah"),
      DataOption("5", "Dokter Penyakit Dalam"),
      DataOption("6", "Dokter Penyakit Luar"),
      DataOption("7", "Dokter Kulit"),
      DataOption("8", "Dokter Ahli Saraf")
  )
 
  // state selected options
  var selectedItems by remember { mutableStateOf(listOf<DataOption>()) }
 
  Select(
    type = "outline",
    required = true,
    label = "Pilih Spesialis",
    size = "md",
    radius = "sm",
    selectedOptions = selectedItems,
    placeholder = "Pilih Spesialis",
    disabled = false,
    helperText = "Helper text",
    errorMessage = "Field Spesialis Required",
    options = options,
    isError = false,
    multiselect = true,
    onChange = { selected ->
      selectedItems = if (selectedItems.contains(selected)) {
        selectedItems - selected
      } else {
        selectedItems + selected
      }
    }
  )

Examples

Variant

Use the variants outline, background, or underline to change style of the select.

Select Example Variant

Multiple (optional)

Use multiple to turn single into multiple select.

Select Example Multiple

Size

Use the size sm, md, or lg to change the size of the select.

Select Example Multiple

Radius

Use the radius sm, md, or lg to change the radius of the select.

Select Example Multiple

Props

Props	Required	Default	Type	description
id	true	-	`string`	A unique identifier for the select.
label	false	-	`string`	The label text for the select.
type	true	`outline`	`outline`, `background`, `underline`	The visual style variant type of the select.
size	true	`md`	`sm`, `md`, `lg`	The size of the select.
radius	true	`xs`	`none`, `xs`, `sm`, `md`, `lg`, `xl`, `full`	Corner radius of the select.
options	false	-	`List<DataOption>`	A list of available options for selection. Each option is represented by a `DataOption(id: String, label: String)` object.
selectedOptions	false	-	`List<DataOption>`	A list of pre-selected options. Used for multi-selection or default single selection.
multiselect	false	`false`	`boolean`	If true, select will be set to multiple select.
required	true	`false`	`boolean`	If true, required state will be set for the select.
onChange	true	-	`(DataOption) -> Unit = {}`	A callback triggered when an option is selected. Receives the selected `DataOption` as a parameter.
placeholder	true	-	`string`	Placholder information to provide input select area information.
disabled	false	`false`	`boolean`	If true, select will be set to disabled state.
isError	false	`false`	`boolean`	If true, select will be set to error state.
helperText	false	-	`string`	Helper text information to provide select information.
errorMessage	false	-	`string`	Text displayed below the input when there is an error, indicating invalid select or a validation issue.
style	false	-	`Modifier`	Custom styles for the select component.

Search Slider