Carbon Compose/com.gabrieldrn.carbon.dropdown.multiselect/MultiselectDropdown

MultiselectDropdown

@Composable
fun <K : Any> MultiselectDropdown(expanded: Boolean, placeholder: String, options: Map<K, DropdownOption>, selectedOptions: List<K>, onOptionClicked: (K) -> Unit, onClearSelection: () -> Unit, onExpandedChange: (Boolean) -> Unit, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, label: String? = null, state: DropdownInteractiveState = DropdownInteractiveState.Enabled, dropdownSize: DropdownSize = DropdownSize.Large, minVisibleItems: Int = 4)

Multiselect Dropdown

Use when you can select multiple options from a list or to filter information.

Making a selection

  • By default, the dropdown displays placeholder text in the field when closed.

  • Clicking a closed field opens a menu of options. Each option contains a checkbox input to the left of the option text.

  • The menu stays open while options are being selected. The menu closes by clicking the field or outside of the dropdown.

  • Once options have been selected from the menu, a tag appears to the left of the text in the field containing the total number of selected options. The placeholder text can change to text that better reflects what is selected.

  • Selected options shift to the top of the menu in alphanumeric order.

  • Unlike dropdown and combo box, the menu does not close once the user makes selections. Because multiple selections are possible, the user needs to click outside of the dropdown or on the parent element to close the menu.

(From Dropdown documentation)

Parameters

K

Type to identify the options.

expanded

Whether the dropdown is expanded or not.

placeholder

The text to be displayed in the field when no option is selected.

options

The options to be displayed in the dropdown menu. A map signature ensures that the keys are unique and can be used to identify the selected option. The strings associated with each key are the texts to be displayed in the dropdown menu.

selectedOptions

The currently selected options.

onOptionClicked

Callback invoked when an option is clicked. The option key is passed as a parameter, and the callback should be used to update a remembered state with the new value.

onClearSelection

Callback invoked when the clear selection button is clicked.

onExpandedChange

Callback invoked when the expanded state of the dropdown changes. It should be used to update a remembered state with the new value.

onDismissRequest

Callback invoked when the dropdown menu should be dismissed.

modifier

The modifier to be applied to the dropdown.

label

The label to be displayed above the dropdown field (optionnal).

state

The DropdownInteractiveState of the dropdown.

dropdownSize

The size of the dropdown, in terms of height. Defaults to DropdownSize.Large.

minVisibleItems

The minimum number of items to be visible in the dropdown menu before the user needs to scroll. This value is used to calculate the height of the menu. Defaults to 4.

Throws

If the options map is empty.

@Composable
fun <K : Any> MultiselectDropdown(placeholder: String, options: Map<K, DropdownOption>, selectedOptions: List<K>, onOptionClicked: (K) -> Unit, onClearSelection: () -> Unit, modifier: Modifier = Modifier, label: String? = null, state: DropdownInteractiveState = DropdownInteractiveState.Enabled, dropdownSize: DropdownSize = DropdownSize.Large, minVisibleItems: Int = 4)

Multiselect Dropdown

Use when you can select multiple options from a list or to filter information.

Making a selection

  • By default, the dropdown displays placeholder text in the field when closed.

  • Clicking a closed field opens a menu of options. Each option contains a checkbox input to the left of the option text.

  • The menu stays open while options are being selected. The menu closes by clicking the field or outside of the dropdown.

  • Once options have been selected from the menu, a tag appears to the left of the text in the field containing the total number of selected options. The placeholder text can change to text that better reflects what is selected.

  • Selected options shift to the top of the menu in alphanumeric order.

  • Unlike dropdown and combo box, the menu does not close once the user makes selections. Because multiple selections are possible, the user needs to click outside of the dropdown or on the parent element to close the menu.

This overload is a convenience function that uses a mutable state to manage the expanded state.

(From Dropdown documentation)

Parameters

K

Type to identify the options.

placeholder

The text to be displayed in the field when no option is selected.

options

The options to be displayed in the dropdown menu. A map signature ensures that the keys are unique and can be used to identify the selected option. The strings associated with each key are the texts to be displayed in the dropdown menu.

selectedOptions

The currently selected options.

onOptionClicked

Callback invoked when an option is clicked. The option key is passed as a parameter, and the callback should be used to update a remembered state with the new value.

onClearSelection

Callback invoked when the clear selection button is clicked.

modifier

The modifier to be applied to the dropdown.

label

The label to be displayed above the dropdown field (optionnal).

state

The DropdownInteractiveState of the dropdown.

dropdownSize

The size of the dropdown, in terms of height. Defaults to DropdownSize.Large.

minVisibleItems

The minimum number of items to be visible in the dropdown menu before the user needs to scroll. This value is used to calculate the height of the menu. Defaults to 4.

Throws

If the options map is empty.