Skip to main content

Chip

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

Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.

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 save_to_favorites_clicked(e):
e.control.label.value = "Saved to favorites"
e.control.leading = ft.Icon(ft.icons.FAVORITE_OUTLINED)
e.control.disabled = True
page.update()

def open_google_maps(e):
page.launch_url("https://maps.google.com")
page.update()

save_to_favourites = 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=save_to_favorites_clicked,
)

open_in_maps = ft.Chip(
label=ft.Text("9 min walk"),
leading=ft.Icon(ft.icons.MAP_SHARP),
bgcolor=ft.colors.GREEN_200,
on_click=open_google_maps,
)

page.add(ft.Row([save_to_favourites, open_in_maps]))

ft.app(target=main)

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 amenity_selected(e):
page.update()

title = ft.Row([ft.Icon(ft.icons.HOTEL_CLASS), ft.Text("Amenities")])
amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"]
amenity_chips = []

for amenity in amenities:
amenity_chips.append(
ft.Chip(
label=ft.Text(amenity),
bgcolor=ft.colors.GREEN_200,
disabled_color=ft.colors.GREEN_100,
autofocus=True,
on_select=amenity_selected,
)
)

page.add(title, ft.Row(amenity_chips))

ft.app(target=main)

Properties

autofocus

True if the control 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

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

border_side

Defines the color and weight of the chip's outline. Value is the instance of BorderSide class.

check_color

Color of the chip's check mark when a check mark is visible.

click_elevation

A non-negative value which defines the elevation of the chip when clicked/pressed. Defaults to 8.0.

clip_behavior

The content will be clipped (or not) according to this option. Property value is ClipBehavior enum. See Container.clip_behavior for possible values.

Defaults to ClipBehavior.NONE.

color

The color that fills the chip in various material states . See Radio.fill_color for possible values.

delete_icon_tooltip

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

delete_icon

A Control to display to the right of the chip's label in case on_delete event is specified. Defaults to an Icon set to use ft.icons.CANCEL.

delete_icon_color

Color of the delete_icon.

disabled_color

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

elevation

A non-negative value which defines the size of the shadow below the chip. Defaults to 0.

label

A Control that represents primary content of the chip, typically a Text. Label is a required property.

label_padding

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.

See Container.padding for more information about padding and possible values.

label_style

The style to be applied to the chip's label. See Text.textstyle for more information about TextStyle and possible values.

leading

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

Typically the leading control is an Icon or a CircleAvatar.

padding

The padding between the label and the outside shape.

By default, this is 4 logical pixels on all sides.

See Container.padding for more information about padding and possible values.

selected

If on_select event is specified, selected property is used to determine wheather the chip is selected or not. Defaults to False.

selected_color

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

selected_shadow_color

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

shadow_color

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

shape

The shape of the border around the chip.

The value is an instance of one of the following implementations:

  • StadiumBorder
  • RoundedRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.
  • CircleBorder
  • BeveledRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.
  • ContinuousRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.

The default shape is a StadiumBorder.

show_checkmark

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

surface_tint_color

The color used as an overlay on bgcolor to indicate elevation.

visual_density

Defines how compact the control's layout will be.

Property value is ThemeVisualDensity enum with the following possible values: STANDARD, COMPACT, COMFORTABLE, ADAPTIVE_PLATFORM_DENSITY.

Events

on_blur

Fires when the control has lost focus.

on_click

Fires when the user clicks on the chip. Cannot be specified together with on_select event.

on_delete

Fires when the user clicks on the delete_icon.

on_focus

Fires when the control has received focus.

on_select

Fires when the user clicks on the chip. Changes selected property to the opposite value. Cannot be specified together with on_click event.