InputChip

ChipGroupReflowSample

@OptIn(ExperimentalLayoutApi::class)
@Preview
@Composable
fun ChipGroupReflowSample() {
    var selected by remember { mutableStateOf(false) }
    val colorNames =
        listOf(
            "Blue",
            "Yellow",
            "Red",
            "Orange",
            "Black",
            "Green",
            "White",
            "Magenta",
            "Gray",
            "Transparent",
        )
    Column {
        FlowRow(
            modifier =
                Modifier.fillMaxWidth(1f)
                    .wrapContentHeight(align = Alignment.Top)
                    .then(
                        if (selected) {
                            Modifier.verticalScroll(rememberScrollState())
                        } else {
                            Modifier.horizontalScroll(rememberScrollState())
                        }
                    ),
            horizontalArrangement = Arrangement.Start,
            maxLines = if (!selected) 1 else Int.MAX_VALUE,
        ) {
            /*
             * When chip lists exceed the available horizontal screen space, one option is to
             * provide a leading chip that expands the list into a vertical scrolling list. This
             * ensures all options are accessible while maintaining the position of the content
             * below the chip list.
             */
            FilterChip(
                selected = selected,
                modifier =
                    Modifier.padding(horizontal = 4.dp)
                        .align(alignment = Alignment.CenterVertically),
                onClick = { selected = !selected },
                label = { Text("Show All") },
                leadingIcon = {
                    Icon(
                        imageVector = Icons.Filled.Tune,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize),
                    )
                },
            )
            Box(
                Modifier.height(FilterChipDefaults.Height)
                    .align(alignment = Alignment.CenterVertically)
            ) {
                VerticalDivider()
            }
            colorNames.fastForEachIndexed { index, element ->
                AssistChip(
                    modifier =
                        Modifier.padding(horizontal = 4.dp)
                            .align(alignment = Alignment.CenterVertically),
                    onClick = { /* do something*/ },
                    label = { Text("$element $index") },
                )
            }
        }
    }
}

ChipGroupSingleLineSample

@Preview
@Composable
fun ChipGroupSingleLineSample() {
    var expanded by remember { mutableStateOf(false) }
    val listSize = 9
    val chipData = List(listSize) { index -> "Chip $index" }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
            AssistChip(
                onClick = { expanded = !expanded },
                label = { Text("Show All") },
                leadingIcon = {
                    Icon(
                        imageVector = Icons.Filled.Tune,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize),
                    )
                },
            )
            /*
             * When chip lists exceed the available horizontal screen space, one option is to
             * provide a chip button that opens a menu displaying all chip options. This ensures
             * all options are accessible while maintaining the position of the content below the
             * chip list.
             */
            DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
                repeat(listSize) { index ->
                    DropdownMenuItem(
                        text = { Text(chipData[index]) },
                        onClick = {},
                        trailingIcon = {
                            Icon(Icons.AutoMirrored.Filled.ArrowRight, contentDescription = null)
                        },
                    )
                }
            }
            repeat(listSize) { index ->
                AssistChip(
                    modifier = Modifier.padding(horizontal = 4.dp),
                    onClick = { /* do something*/ },
                    label = { Text(chipData[index]) },
                    trailingIcon = { Icon(Icons.Filled.ArrowDropDown, contentDescription = null) },
                )
            }
        }
    }
}

InputChipSample

@Preview
@Composable
fun InputChipSample() {
    var selected by remember { mutableStateOf(false) }
    InputChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Input Chip") },
    )
}

InputChipWithAvatarSample

@Preview
@Composable
fun InputChipWithAvatarSample() {
    var selected by remember { mutableStateOf(false) }
    InputChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Input Chip") },
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize),
            )
        },
    )
}