In today’s tutorial, we will learn about the Chip in KMM KMP Compose Multiplatform for both Android & iOS platforms. Currently, there are 2 Chip components available in Kotlin multiplatform-Kotlin multiplatform mobile. Chip component and FilterChip component. We will learn about both, including designing custom chips like the Assist, Input, Suggestion, and Elevated chips.

Chip in KMM KMP Compose Multiplatform Tutorial:

The Chip component is a UI element used for actions, filtering content, showing user selections, and showing emails or contacts uniquely. We all have seen Chip in many mobile and web applications. In the mobile, when we select a filter option in the filter, our selection starts showing at the top in Chips format. When we send an email to multiple contacts, it will show in Chip format after typing each email. These are the basic examples of Chip. The Chip component displays Text and Icons or even images.

Creating Simple Chip in KMP(KMM):

In KMP, we will use the Chip keyword to create a Chip component.

Code explanation:

• onClick: Invokes when the user clicks or taps on the Chip.
• Text: The body part Text component.

Creating Chip with Icons:

To create a Chip component with vector icons, we have to use the leadingIcon property.

Code explanation:

• border: To show a simple line border around the Chip.
• colors: To manage Chip colors.
• leadingIcon: Pass any component you want at the start of the chip. We are showing Icon.

Complete code:

Screenshot:

Creating Chip with Custom Colors:

The Chip component has a property called ChipDefaults.outlinedChipColors() has a few different sub-properties, which are used to set every color in a Chip.

Code explanation:

1. disabledLeadingIconContentColor: When the Chip is disabled, this color will be applied to the chip leading component.
2. disabledContentColor: Applied on the Chip content when it is disabled.
3. contentColor: Default chip content Text color.
4. backgroundColor: Background color of complete Chip.
5. disabledBackgroundColor: The background color of the Chip when it is disabled.
6. leadingIconContentColor: Default chip leading icon or widget tint color.

Screenshot:

Dynamically generating multiple Chip:

We use the repeat() in the FlowRow() component to create Chip dynamically. For testing purposes, we generate 10 chips and print the index position for each chip.

Screenshot:

Creating Disabled Chip:

To create a Disabled Chip, we have to use the enabled property. This supports value in Boolean format. In the disabled state, the onClick method will not work.

• enabled = false :- Will disable the Chip.

Screenshot:

Creating Filter Chip:

Filter chips apply different types of filters to data in Kotlin Compose Multiplatform. In this example, we show selected filter chip items in a Text.

Code explanation:

• chipItems: This state contains all the Chip items.
• selectedChips: All the selected Chip items will be stored in this state.
• chipItems.forEach{}: We will run a for each loop as per chip items so it will draw all of these items on the screen.
• filterChip: Filter chip widget.
• selected: Contains selected chips.
• onClick: Invokes every time the user Taps on a Chip, then we will check if that item exists or not in the State and update data.

Complete code:

Screenshots:

Input Chip in KMP KMM:

Input chips are dynamically generated at application run time using TextField. We have seen these types of Chips in Emails and messages when we add multiple contacts.

Code explanation:

• inputText: Will contains the TextField typed text.
• chipList: Stores the Chip list.
• OutlinedTextField: Text Input component to take input from the user.

Complete code:

Screenshots:

Screenshot in iOS: