Chip

In plain words

A small rounded tag. Click it to turn a filter on or off, or press its ✕ to remove it.

A small rounded tag. With on_press it acts as a filter you can toggle (selected=True highlights it), and with on_remove it shows a close button, as in a list of tags.

ui.chip · Category: Actions · Full reference →

Preview

Code

pz.row([
    ui.chip("python", icon="tag", selected=True, on_press=on_filter),
    ui.chip("rust", on_press=on_filter),
    ui.chip("iced", on_remove=on_remove),
    ui.chip("zed", icon="sparkles", on_remove=on_remove),
], spacing=6)

When to use

• For tags, filters and selected values (a multi-select, recipients of a message).
• For read-only statuses use a Badge.

Usage

import pyzed as pz
from pyzed import ui

class Tags(pz.App):
    def __init__(self):
        self.tags = ["python", "rust", "iced"]

    def view(self):
        return pz.row([ui.chip(t, on_remove=lambda t=t: self.tags.remove(t)) for t in self.tags],
                      spacing=6, wrap=True)

Variants

About these captures

Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site’s theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open Code under a capture to see the snippet that draws it; free names such as on_save stand for your own callbacks.

Kind

Static

Code

ui.chip("python")

on_press=

Code

ui.chip("rust", on_press=on_filter)

selected=True

Code

ui.chip("python", on_press=on_filter, selected=True)

on_remove=

Code

ui.chip("iced", on_remove=on_remove)

Content

icon="tag"

Code

ui.chip("design", icon="tag")

Icon and remove

Code

ui.chip("ada@example.com", icon="user", on_remove=on_remove)

Selected with icon

Code

ui.chip("favorites", icon="star", selected=True, on_press=on_filter)

States and events

tint="error"

Code

ui.chip("Failing", on_press=on_press, selected=True, tint="error")

disabled=True

Code

ui.chip("Archived", on_press=on_press, on_remove=on_remove, disabled=True)

Events

Chip has 2 events of its own, listed below. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Event	Handler gets	When
on_press	()	Message or callable sent on press. None disables the control.
on_remove	()	Shows a ✕ that sends this when clicked.

Handler gets is what Pyzed passes to your callable: () means nothing. Any handler can also be a message (a value that is not callable), which goes to update().

Handling the events

The same events written three ways. Imperative: methods of the app change self. Declarative: the handlers produce messages and one update() decides. Functional: a pure function draws an immutable state and asks for changes with set_state(...). See Imperative, declarative and functional.

Imperative

class Filters(pz.App):
    def __init__(self):
        self.tags = ["python", "rust", "iced"]
        self.active = "python"

    def view(self):
        return pz.row([
            ui.chip(t, selected=t == self.active,
                    on_press=lambda t=t: setattr(self, "active", t),     # pick it
                    on_remove=lambda t=t: self.tags.remove(t))           # its ✕
            for t in self.tags
        ], spacing=6, wrap=True)

Declarative

from dataclasses import dataclass


@dataclass
class Pick:
    tag: str


@dataclass
class Remove:
    tag: str


class Filters(pz.App):
    tags = ["python", "rust", "iced"]
    active = "python"

    def update(self, message):
        match message:
            case Pick(tag):
                self.active = tag
            case Remove(tag):
                self.tags = [t for t in self.tags if t != tag]

    def view(self):
        return pz.row([ui.chip(t, selected=t == self.active, on_press=Pick(t), on_remove=Remove(t))
                       for t in self.tags], spacing=6, wrap=True)

Functional

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    tags: tuple = ("python", "rust", "iced")
    active: str = "python"


def view(state, set_state):
    return pz.row([
        ui.chip(t, selected=t == state.active,
                on_press=lambda t=t: set_state(active=t),
                on_remove=lambda t=t: set_state(tags=tuple(x for x in state.tags if x != t)))
        for t in state.tags
    ], spacing=6, wrap=True)

Properties and API

ui.chip

chip(
    content,
    *,
    on_press=None,
    on_remove=None,
    selected=False,
    icon=None,
    tint='accent',
    disabled=False,
    theme=None,
)

A compact tag, optionally clickable (filters) and with a button to remove it.

Property	Default	Description
content	required	Text.
selected	False	Marks it as selected.
icon	None	Name of a Lucide icon (pyzed icons lists them).
tint	"accent"	Color when selected (a theme token).
disabled	False	Greys it out and ignores presses.
theme	None	Theme to use instead of the current one (pyzed.theme.current()).

Events: on_press, on_remove (events).

Full reference →

Related

BadgeA small pill for statuses, versions and counters.

Toggle groupAn icon-only segmented control.