Skip to content

Chip

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

ft.Chip(
    label="Explore topics",
    leading=ft.Icon(ft.Icons.EXPLORE_OUTLINED),
)

Chip

Basic Chip

Inherits: LayoutControl

Properties

Events

Examples#

Live example

Assist chips#

Assist chips are chips with leading icon and on_click event specified.

They represent smart or automated actions that appear dynamically and contextually in a UI.

An alternative to assist chips are buttons, which should appear persistently and consistently.

import flet as ft


def main(page: ft.Page):
    def handle_chip1_click(e: ft.Event[ft.Chip]):
        e.control.label.value = "Saved to favorites"
        e.control.leading = ft.Icon(ft.Icons.FAVORITE_OUTLINED)
        e.control.disabled = True
        page.update()

    async def handle_chip2_click(e: ft.Event[ft.Chip]):
        await page.launch_url("https://maps.google.com")
        page.update()

    page.add(
        ft.Row(
            controls=[
                ft.Chip(
                    label=ft.Text("Save to favourites"),
                    leading=ft.Icon(ft.Icons.FAVORITE_BORDER_OUTLINED),
                    bgcolor=ft.Colors.GREEN_200,
                    disabled_color=ft.Colors.GREEN_100,
                    autofocus=True,
                    on_click=handle_chip1_click,
                ),
                ft.Chip(
                    label=ft.Text("9 min walk"),
                    leading=ft.Icon(ft.Icons.MAP_SHARP),
                    bgcolor=ft.Colors.GREEN_200,
                    on_click=handle_chip2_click,
                ),
            ]
        )
    )


if __name__ == "__main__":
    ft.run(main)

assist-chips

Filter chips#

Filter chips are chips with on_select event specified.

They use tags or descriptive words provided in the label to filter content. They can be a good alternative to switches or checkboxes.

import flet as ft


def main(page: ft.Page):
    def handle_amenity_selection(e: ft.Event[ft.Chip]):
        page.update()

    amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"]

    page.add(
        ft.Row(
            controls=[
                ft.Icon(ft.Icons.HOTEL_CLASS),
                ft.Text("Amenities"),
            ]
        ),
        ft.Row(
            controls=[
                ft.Chip(
                    label=ft.Text(amenity),
                    bgcolor=ft.Colors.GREEN_200,
                    disabled_color=ft.Colors.GREEN_100,
                    autofocus=True,
                    on_select=handle_amenity_selection,
                )
                for amenity in amenities
            ]
        ),
    )


if __name__ == "__main__":
    ft.run(main)

filter-chips

Properties#

autofocus class-attribute instance-attribute #

autofocus: bool = False

Whether this chip will be selected as the initial focus.

If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

bgcolor class-attribute instance-attribute #

bgcolor: Optional[ColorValue] = None

Color to be used for the unselected, enabled chip's background.

border_side class-attribute instance-attribute #

border_side: Optional[BorderSide] = None

Defines the color and weight of this chip's outline.

check_color class-attribute instance-attribute #

check_color: Optional[ColorValue] = None

The color of this chip's check mark when a check mark is visible.

clip_behavior class-attribute instance-attribute #

clip_behavior: ClipBehavior = NONE

The content will be clipped (or not) according to this option.

color class-attribute instance-attribute #

color: Optional[ControlStateValue[ColorValue]] = None

The color that fills this chip in various ControlState.

delete_drawer_animation_style class-attribute instance-attribute #

delete_drawer_animation_style: Optional[AnimationStyle] = (
    None
)

The animation style for the delete_icon's animations.

delete_icon class-attribute instance-attribute #

delete_icon: Optional[Control] = None

A Control to display to the right of this chip's label in case on_delete event is specified.

delete_icon_color class-attribute instance-attribute #

delete_icon_color: Optional[ColorValue] = None

The color of the delete_icon.

delete_icon_size_constraints class-attribute instance-attribute #

delete_icon_size_constraints: Optional[BoxConstraints] = (
    None
)

The size constraints for the delete_icon control.

If None, it defaults to a minimum size of chip height or label height (whichever is greater) and a padding of 8.0 pixels on all sides.

delete_icon_tooltip class-attribute instance-attribute #

delete_icon_tooltip: Optional[str] = None

The text to be used for this chip's delete_icon tooltip. If not provided or provided with an empty string, the tooltip of the delete icon will not be displayed.

disabled_color class-attribute instance-attribute #

disabled_color: Optional[ColorValue] = None

The color used for this chip's background if it is disabled.

elevation class-attribute instance-attribute #

elevation: Optional[Number] = None

A non-negative value which defines the size of the shadow below this chip.

Defaults to 0.

Raises:

elevation_on_click class-attribute instance-attribute #

elevation_on_click: Optional[Number] = None

The elevation to be applied on this chip relative to its parent during the press motion. This controls the size of the shadow below this chip.

Defaults to 8.0.

Raises:

enable_animation_style class-attribute instance-attribute #

enable_animation_style: Optional[AnimationStyle] = None

The animation style for the enable and disable animations.

label instance-attribute #

label: StrOrControl

The primary content of this chip.

Typically a Text control.

label_padding class-attribute instance-attribute #

label_padding: Optional[PaddingValue] = None

The padding around the label.

By default, this is 4 logical pixels at the beginning and the end of the label, and zero on top and bottom.

label_text_style class-attribute instance-attribute #

label_text_style: Optional[TextStyle] = None

The style to be applied to this chip's label.

leading class-attribute instance-attribute #

leading: Optional[Control] = None

A Control to display to the left of this chip's label.

Typically the leading control is an Icon or a CircleAvatar.

leading_drawer_animation_style class-attribute instance-attribute #

leading_drawer_animation_style: Optional[AnimationStyle] = (
    None
)

The animation style for the leading control's animations.

leading_size_constraints class-attribute instance-attribute #

leading_size_constraints: Optional[BoxConstraints] = None

The size constraints for the leading control.

If None, it defaults to a minimum size of chip height or label height (whichever is greater) and a padding of 8.0 pixels on all sides.

padding class-attribute instance-attribute #

padding: Optional[PaddingValue] = None

The padding between the label and the outside shape.

Defaults to 8 logical pixels on all sides.

select_animation_style class-attribute instance-attribute #

select_animation_style: Optional[AnimationStyle] = None

The animation style for the select and unselect animations.

selected class-attribute instance-attribute #

selected: bool = False

If on_select event is specified, selected property is used to determine whether this chip is selected or not.

selected_color class-attribute instance-attribute #

selected_color: Optional[ColorValue] = None

The color used for this chip's background when it is selected.

selected_shadow_color class-attribute instance-attribute #

selected_shadow_color: Optional[ColorValue] = None

The color used for this chip's background when the elevation is greater than 0 and this chip is selected.

shadow_color class-attribute instance-attribute #

shadow_color: Optional[ColorValue] = None

The color used for this chip's background when the elevation is greater than 0 and this chip is not selected.

shape class-attribute instance-attribute #

shape: Optional[OutlinedBorder] = None

The shape of the border around this chip.

Defaults to ChipTheme.shape, or if that is resolves to None, falls back to RoundedRectangleBorder(radius=8).

show_checkmark class-attribute instance-attribute #

show_checkmark: bool = True

If on_select event is specified and chip is selected, show_checkmark is used to determine whether or not to show a checkmark.

visual_density class-attribute instance-attribute #

visual_density: Optional[VisualDensity] = None

TBD

Events#

on_blur class-attribute instance-attribute #

on_blur: Optional[ControlEventHandler[Chip]] = None

Called when this chip has lost focus.

on_click class-attribute instance-attribute #

on_click: Optional[ControlEventHandler[Chip]] = None

Called when the user clicks on this chip.

Raises:

on_delete class-attribute instance-attribute #

on_delete: Optional[ControlEventHandler[Chip]] = None

Called when the user clicks on the delete_icon.

on_focus class-attribute instance-attribute #

on_focus: Optional[ControlEventHandler[Chip]] = None

Called when this chip has received focus.

on_select class-attribute instance-attribute #

on_select: Optional[ControlEventHandler[Chip]] = None

Called when the user clicks on this chip.

It internally changes selected property to the opposite value.

Raises: