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:

The chips can also wrap onto multiple lines:

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:

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

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
)

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
)

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
)

Inline AI Notice

The Inline AI Notice is shown when displaying generative content, such as suggestions for chip selections. Create an instance of InlineNoticeData with the appropriate data and pass it as a parameter. A lambda function for handling hyperlink onClick events must also be provided. See InlineNotice for more details.

val inlineNoticeData = InlineNoticeData(showInlineNotice = true)
FioriChip(
  ...
  onHyperlinkClick = { /* Handle inline notice hyperlink click */ },
  inlineNoticeData = inlineNoticeData
)

---

Last update: April 9, 2025