spark/com.adevinta.spark.components.textfields/SingleChoiceComboBox

SingleChoiceComboBox

@Composable
fun SingleChoiceComboBox(state: TextFieldState, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, required: Boolean = false, label: String? = null, placeholder: String? = null, helper: String? = null, leadingContent: @Composable AddonScope.() -> Unit? = null, trailingContent: @Composable AddonScope.() -> Unit? = null, status: FormFieldStatus? = null, statusMessage: String? = null, inputTransformation: InputTransformation? = null, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, onKeyboardAction: KeyboardActionHandler? = null, lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, interactionSource: MutableInteractionSource? = null, outputTransformation: OutputTransformation? = null, scrollState: ScrollState = rememberScrollState(), dropdownContent: @Composable SingleChoiceDropdownItemColumnScope.() -> Unit)

A ComboBox component that allows users to select a single option from a dropdown list. It combines a text field with a dropdown menu, providing a searchable interface for selecting options.

Parameters

state

The state of the text field that controls the input value

expanded

Whether the dropdown menu is currently expanded

onExpandedChange

Callback invoked when the expanded state changes

onDismissRequest

Callback invoked when the dropdown menu should be dismissed

modifier

Modifier to be applied to the ComboBox

enabled

Whether the ComboBox is enabled

required

Whether the field is required

label

Optional label text displayed above the ComboBox

placeholder

Optional placeholder text shown when the field is empty

helper

Optional helper text displayed below the ComboBox

leadingContent

Optional composable content displayed at the start of the ComboBox

trailingContent

Optional composable content displayed at the end of the ComboBox, if not provided, a default trailing icon will be used.

status

Optional status of the form field (e.g., error, success)

statusMessage

Optional message associated with the status

inputTransformation

Optional transformation applied to input text

keyboardOptions

Options for the keyboard

onKeyboardAction

Optional handler for keyboard actions

lineLimits

Limits for the number of lines in the text field

onTextLayout

Optional callback for text layout changes

interactionSource

Optional interaction source for the ComboBox

outputTransformation

Optional transformation applied to output text

scrollState

Scroll state for the text field

dropdownContent

Content of the dropdown menu, using SingleChoiceDropdownItemColumnScope

See also

for a version that supports multiple selections

Samples

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.ScrollState
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement.Absolute.spacedBy
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.InputTransformation
import androidx.compose.foundation.text.input.KeyboardActionHandler
import androidx.compose.foundation.text.input.OutputTransformation
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.MenuAnchorType
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.fastForEach
import com.adevinta.spark.PreviewTheme
import com.adevinta.spark.R
import com.adevinta.spark.components.chips.Chip
import com.adevinta.spark.components.chips.ChipDefaults
import com.adevinta.spark.components.chips.ChipIntent
import com.adevinta.spark.components.chips.ChipStyles
import com.adevinta.spark.components.icons.Icon
import com.adevinta.spark.components.menu.DropdownMenuItem
import com.adevinta.spark.components.menu.MultiChoiceDropdownItemColumnScope
import com.adevinta.spark.components.menu.MultipleChoiceExposedDropdownMenu
import com.adevinta.spark.components.menu.SingleChoiceDropdownItemColumnScope
import com.adevinta.spark.components.menu.SingleChoiceExposedDropdownMenu
import com.adevinta.spark.components.text.Text
import com.adevinta.spark.icons.DeleteOutline
import com.adevinta.spark.icons.SparkIcons
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf

fun main() { 
   //sampleStart 
   PreviewTheme {
    val state = rememberTextFieldState()
    var expanded by remember { mutableStateOf(false) }
    SingleChoiceComboBox(
        state = state,
        expanded = expanded,
        onExpandedChange = { expanded = it },
        onDismissRequest = { expanded = false },
        enabled = true,
        required = true,
        label = "Label",
        placeholder = "Placeholder",
        helper = "Helper text",
    ) {
        for (i in 0..(8)) {
            DropdownMenuItem(
                text = { Text(text = "Item $i") },
                selected = false,
                onClick = { expanded = false },
            )
        }
    }
} 
   //sampleEnd
}