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,
                ),
            ]
        )
    )


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
            ]
        ),
    )


ft.run(main)

filter-chips

Properties#

autofocus #

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 #

bgcolor: ColorValue | None = None

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

border_side #

border_side: BorderSide | None = None

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

check_color #

check_color: ColorValue | None = None

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

clip_behavior #

clip_behavior: ClipBehavior = NONE

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

color #

color: ControlStateValue[ColorValue] | None = None

The color that fills this chip in various ControlState.

delete_drawer_animation_style #

delete_drawer_animation_style: AnimationStyle | None = None

The animation style for the delete_icon's animations.

delete_icon #

delete_icon: Control | None = None

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

delete_icon_color #

delete_icon_color: ColorValue | None = None

The color of the delete_icon.

delete_icon_size_constraints #

delete_icon_size_constraints: BoxConstraints | None = 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 #

delete_icon_tooltip: str | None = 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 #

disabled_color: ColorValue | None = None

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

elevation #

elevation: Number | None = None

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

Defaults to 0.

Raises:

elevation_on_click #

elevation_on_click: Number | None = 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 #

enable_animation_style: AnimationStyle | None = None

The animation style for the enable and disable animations.

label #

label: StrOrControl

The primary content of this chip.

Typically a Text control.

label_padding #

label_padding: PaddingValue | None = 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 #

label_text_style: TextStyle | None = None

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

leading #

leading: Control | None = 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 #

leading_drawer_animation_style: AnimationStyle | None = None

The animation style for the leading control's animations.

leading_size_constraints #

leading_size_constraints: BoxConstraints | None = 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 #

padding: PaddingValue | None = None

The padding between the label and the outside shape.

Defaults to 8 logical pixels on all sides.

select_animation_style #

select_animation_style: AnimationStyle | None = None

The animation style for the select and unselect animations.

selected #

selected: bool = False

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

selected_color #

selected_color: ColorValue | None = None

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

selected_shadow_color #

selected_shadow_color: ColorValue | None = None

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

shadow_color #

shadow_color: ColorValue | None = None

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

shape #

shape: OutlinedBorder | None = 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 #

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 #

visual_density: VisualDensity | None = None

TBD

Events#

on_blur #

on_blur: ControlEventHandler[Chip] | None = None

Called when this chip has lost focus.

on_click #

on_click: ControlEventHandler[Chip] | None = None

Called when the user clicks on this chip.

Raises:

on_delete #

on_delete: ControlEventHandler[Chip] | None = None

Called when the user clicks on the delete_icon.

on_focus #

on_focus: ControlEventHandler[Chip] | None = None

Called when this chip has received focus.

on_select #

on_select: ControlEventHandler[Chip] | None = None

Called when the user clicks on this chip.

It internally changes selected property to the opposite value.

Raises: