InputChip

import { InputChip } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    InputChip {
        text: "Input";
        leading-icon: @image-url("../icons/edit.svg");
        trailing-icon: @image-url("../icons/close.svg");
        width: 120px;
        height: 32px;
    }
}

slint

An InputChip is a compact element that represents user input or selections. It can contain text, leading icons, trailing icons, and avatars. Input chips are commonly used to display user-entered information like tags, contacts, or filter selections, and often include a trailing action like a close button.

Properties

avatar

image default: the empty image

An optional avatar image displayed on the chip.

avatar-background

color default: #00000000

The background color for the avatar.

checkable

bool default: false

Whether the chip can be toggled between checked and unchecked states.

checked

bool (in-out) default: false

Whether the chip is in the checked (selected) state. Only relevant when checkable is true.

enabled

bool default: true

Whether the chip is enabled and can be interacted with.

has-focus

bool default: false

Whether the component has focus.

leading-icon

image default: the empty image

An optional icon displayed at the beginning of the chip.

text

string default: ""

The text label displayed on the chip.

string default: ""

A tooltip text that appears when hovering over the chip.

trailing-icon

image default: the empty image

An optional icon displayed at the end of the chip, commonly used for actions like closing or removing the chip.

Callbacks

clicked()

Invoked when the main area of the chip is clicked.

trailing-icon-clicked()

Invoked when the trailing icon is clicked. This is typically used for actions like removing the chip.

Functions

clear-focus()

Clears the focus from the component.

focus()

Focuses the component.

toggle()

Toggles the chip state between checked and unchecked. Only has an effect when checkable is true.