Chip

See also

Material Design spec, Chips

Chips are compact elements that represent an input, attribute, or action.

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chips.png

Usage

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:

    MDChip:
        text: "Portland"
        pos_hint: {"center_x": .5, "center_y": .5}
        on_release: app.on_release_chip(self)
'''


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)

    def on_release_chip(self, instance_check):
        print(instance_check)


Test().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ordinary-chip.png

Use with right icon

MDChip:
    text: "Portland"
    icon_right: "close-circle-outline"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-right-icon.png

Use with left icon

MDChip:
    text: "Portland"
    icon_left: "map-marker"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-left-icon.png

Use with custom left icon

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-custom-left-icon.png

Use with left and right icon

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
    icon_right: "close-circle-outline"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-left-right-icon.png

Use with outline

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
    icon_right: "close-circle-outline"
    line_color: app.theme_cls.disabled_hint_text_color
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-outline.png

Use with custom color

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
    icon_right: "close-circle-outline"
    line_color: app.theme_cls.disabled_hint_text_color
    md_bg_color: 1, 0, 0, .5
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-custom-color.png

Use with elevation

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
    icon_right: "close-circle-outline"
    line_color: app.theme_cls.disabled_hint_text_color
    md_bg_color: 1, 0, 0, .5
    elevation: 12
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-elevation.png

Behavior

Long press on the chip, it will be marked. When you click on the marked chip, the mark will be removed:

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-activate.gif

Examples

Multiple choose

Selecting a single choice chip automatically deselects all other chips in the set.

from kivy.animation import Animation
from kivy.lang import Builder

from kivymd.uix.screen import MDScreen
from kivymd.uix.chip import MDChip
from kivymd.app import MDApp

KV = '''
<MyScreen>

    MDBoxLayout:
        orientation: "vertical"
        adaptive_size: True
        spacing: "12dp"
        padding: "56dp"
        pos_hint: {"center_x": .5, "center_y": .5}

        MDLabel:
            text: "Multiple choice"
            bold: True
            font_style: "H5"
            adaptive_size: True

        MDBoxLayout:
            id: chip_box
            adaptive_size: True
            spacing: "8dp"

            MyChip:
                text: "Elevator"
                on_press: if self.active: root.removes_marks_all_chips()

            MyChip:
                text: "Washer / Dryer"
                on_press: if self.active: root.removes_marks_all_chips()

            MyChip:
                text: "Fireplace"
                on_press: if self.active: root.removes_marks_all_chips()


ScreenManager:

    MyScreen:
'''


class MyChip(MDChip):
    icon_check_color = (0, 0, 0, 1)
    text_color = (0, 0, 0, 0.5)
    _no_ripple_effect = True

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.bind(active=self.set_chip_bg_color)
        self.bind(active=self.set_chip_text_color)

    def set_chip_bg_color(self, instance_chip, active_value: int):
        '''
        Will be called every time the chip is activated/deactivated.
        Sets the background color of the chip.
        '''

        self.md_bg_color = (
            (0, 0, 0, 0.4)
            if active_value
            else (
                self.theme_cls.bg_darkest
                if self.theme_cls.theme_style == "Light"
                else (
                    self.theme_cls.bg_light
                    if not self.disabled
                    else self.theme_cls.disabled_hint_text_color
                )
            )
        )

    def set_chip_text_color(self, instance_chip, active_value: int):
        Animation(
            color=(0, 0, 0, 1) if active_value else (0, 0, 0, 0.5), d=0.2
        ).start(self.ids.label)


class MyScreen(MDScreen):
    def removes_marks_all_chips(self):
        for instance_chip in self.ids.chip_box.children:
            if instance_chip.active:
                instance_chip.active = False


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)


Test().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-multiple-choose.gif

Only choose

Only one chip will be selected.

KV = '''
<MyScreen>

    [...]

        MDBoxLayout:
            id: chip_box
            adaptive_size: True
            spacing: "8dp"

            MyChip:
                text: "Elevator"
                on_active: if self.active: root.removes_marks_all_chips(self)

            MyChip:
                text: "Washer / Dryer"
                on_active: if self.active: root.removes_marks_all_chips(self)

            MyChip:
                text: "Fireplace"
                on_active: if self.active: root.removes_marks_all_chips(self)


[...]
'''


class MyScreen(MDScreen):
    def removes_marks_all_chips(self, selected_instance_chip):
        for instance_chip in self.ids.chip_box.children:
            if instance_chip != selected_instance_chip:
                instance_chip.active = False
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-only-choose.gif

API - kivymd.uix.chip.chip

class kivymd.uix.chip.chip.MDChip(**kwargs)

Class implements a rectangular ripple effect.

text

Chip text.

text is an StringProperty and defaults to ‘’.

icon

Chip icon.

Deprecated since version 1.0.0: Use icon_right and icon_left instead.

icon is an StringProperty and defaults to ‘checkbox-blank-circle’.

icon_left

Chip left icon.

New in version 1.0.0.

icon_left is an StringProperty and defaults to ‘’.

icon_right

Chip right icon.

New in version 1.0.0.

icon_right is an StringProperty and defaults to ‘’.

color

Chip color in rgba format.

Deprecated since version 1.0.0.

color is an ColorProperty and defaults to None.

text_color

Chip’s text color in rgba format.

text_color is an ColorProperty and defaults to None.

icon_color

Chip’s icon color in rgba format.

Deprecated since version 1.0.0: Use icon_right_color and icon_left_color instead.

icon_color is an ColorProperty and defaults to None.

icon_right_color

Chip’s right icon color in rgba format.

New in version 1.0.0.

icon_right_color is an ColorProperty and defaults to None.

icon_left_color

Chip’s left icon color in rgba format.

New in version 1.0.0.

icon_left_color is an ColorProperty and defaults to None.

icon_check_color

Chip’s check icon color in rgba format.

New in version 1.0.0.

icon_check_color is an ColorProperty and defaults to None.

check

If True, a checkmark is added to the left when touch to the chip.

Deprecated since version 1.0.0.

check is an BooleanProperty and defaults to False.

selected_chip_color

The color of the chip that is currently selected in rgba format.

Deprecated since version 1.0.0.

selected_chip_color is an ColorProperty and defaults to None.

active

Whether the check is marked or not.

New in version 1.0.0.

active is an BooleanProperty and defaults to False.

on_long_touch(self, *args)

Called when the widget is pressed for a long time.

on_active(self, instance_check, active_value: bool)
do_animation_check(self, md_bg_color: list, scale_value: int)
on_press(self, *args)