Chip Form Cell¶

Chip form cell allows the user to select either a single value or multiple values from a group of values. The values are displayed using Material Design 3 Chips.

Chip Placement¶

By default, chips are displayed on a single line that scrolls horizontally:

Chips

The chips can also wrap onto multiple lines:

Multi-line chips

The Boolean attribute singleLine determines how the chips are placed.

Chip Appearance¶

By default, chips are displayed in the outlined style when they are not selected:

Outlined Chip

When Chips are selected, they become filled chips and a check icon is displayed:

Filled Chip with Check Icon

Chips with leading icons are also supported. They are displayed in the outlined style by default and changed to the filled style once selected. The only difference from a regular Filter Chip is that there is no check icon displayed when chips are selected.

How to Create a Fiori Chip¶

Preparing the Chip Data¶

val chipCellDataDemo = mutableListOf(
    ChipData(1, "first name"),
    ChipData(2, "location"),
    ChipData(3, "age"),
    ChipData(4, "education"),
    ChipData(5, "purpose"),
    ChipData(6, "habit"),
    ChipData(7, "favorite food"),
    ChipData(8, "中文")
)

Stating the Chip Data¶

val mutableStateChips = rememberSaveableStateChipDataList(chipCellDataDemo)

Or, to prepare and state data in one step:

val mutableStateChips = rememberSaveableStateChipDataList(
    ChipData(1, "first name"),
    ChipData(2, "location"),
    ChipData(3, "age"),
    ChipData(4, "education"),
    ChipData(5, "purpose"),
    ChipData(6, "habit"),
    ChipData(7, "favorite food"),
    ChipData(8, "中文")
)

If we don't want the list to be savable, use:

remember {chipCellDataDemo}

Generating Single-Selection Chips¶

FioriChip(
    label = "Single row, Single selection",
    value = FioriSingleSelectionChipValue(mutableStateChips),
    onValueChange = {
        Toast.makeText(
            context,
            "${it.changingChip!!.text} was selected",
            Toast.LENGTH_SHORT
        )
            .show()
    },
    singleRow = true
)

Single-Selection Chips

Generate Multiple-Selection Chips¶

FioriChip(
    label = "Single row, Multiple selection",
    value = FioriMultiSelectionChipValue(mutableStateChips),
    onValueChange = {
        Toast.makeText(
            context,
            "${it.changingChip!!.text} was selected",
            Toast.LENGTH_SHORT
        ).show()
    },
    singleRow = true
)

Multiple-Selection Chips

Leading Icon¶

Chips can contain an icon before the text: To generate these chips, prepare the data as follows:

val chipCellDataDemoWithIcon = mutableListOf(
    ChipData(1, "first name",leadingIcon = FioriIcon(resId = R.drawable.ic_directions_24px)),
    ChipData(2, "location", leadingIcon = FioriIcon(resId = R.drawable.ic_directions_24px)),
    ChipData(3, "age",leadingIcon = FioriIcon(resId = R.drawable.ic_directions_24px))
)

Callback¶

The callback is the onValueChange defined in FioriChip. This is the callback that occurs when the user selects chips. The chips are returned using the callback.

FioriChip(
    label = "Single row Multiple selection",
    value = FioriMultiSelectionChipValue(mutableStateMultiRowMChips),
    onValueChange = {
        Toast.makeText(
            context,
            "${it.changingChip!!.text} was selected",
            Toast.LENGTH_SHORT
        ).show()
    },
    singleRow = true
)

Last update: February 20, 2023