Component Blocks Starter

Clipboard

The Clipboard component provides an easy way to copy text or other data to the user’s clipboard. It renders as a button with a copy icon that changes to a checkmark when content is successfully copied. The component supports both static values and dynamic content through callback functions.

Install

The icon button has a localized “Copy” accessible name by default. Use accessibility_label when the context needs a more specific name, such as “Copy API key”. A tooltip is a separate hint and does not set the accessible name.

#Import

use gpui_kit::component::clipboard::Clipboard;

// Installed in ui/components. That directory is on the Slint include path, so import by file name:
import { Clipboard } from "clipboard.slint";

use iced::widget::{column, container, mouse_area, row, scrollable, svg, text};
use iced::{Alignment, Element, Length, Task, Theme};

#Usage

#Copy

Clipboard::new("simple")
    .value("Hello, World!")

// Stretch fills the card. A grid cell with stretch 0 collapses this
// field, because its preferred width is the parent's width.
field := Input {
    min-width: 280px;
    text: "https://github.com";
    Clipboard {
        value: field.text;
    }
}

// The clipboard is the field's suffix and copies the field's value: the field
// is the caller's `String`, and a press reports the URL it holds now. The
// check is the caller's flag, drawn by the component; the write is iced's own
// `Task`, returned from `update`; and `reset_after` carries the two-second
// deadline that asks the caller to retire the check.
let copy = reset_after(
    Input::new("clipboard-url")
        .value(&app.url)
        .width(Length::Fixed(280.0))
        .on_input(Message::UrlChanged)
        .suffix(
            Clipboard::new(&app.url)
                .copied(app.copied)
                .on_copy(Message::Copy),
        ),
    app.copied,
    Message::ResetCopy,
);

#Basic Clipboard

Clipboard::new("my-clipboard")
    .value("Text to copy")
    .on_copied(|value, window, cx| {
        window.push_notification(format!("Copied: {}", value), cx)
    })

SlintNo Slint version of this example yet.

#Using Dynamic Values

The value_fn method allows you to provide a closure that generates the content to be copied at the time of the copy action.

This is useful when the content to be copied depends on the current state of the application.
And in some cases, it may have a larger overhead to compute, so you only want to do it when the user actually clicks the copy button.

let state = some_state.clone();
Clipboard::new("dynamic-clipboard")
    .value_fn(move |_, cx| {
        state.read(cx).get_current_value()
    })
    .on_copied(|value, window, cx| {
        window.push_notification(format!("Copied: {}", value), cx)
    })

SlintNo Slint version of this example yet.

#With Custom Content

use gpui_kit::component::label::Label;

 h_flex()
     .gap_2()
     .child(Label::new("Share URL"))
     .child(Icon::new(IconName::Share))
     .child(
        Clipboard::new("custom-clipboard")
        .value("https://example.com")
     )

SlintNo Slint version of this example yet.

#In Input Fields

The Clipboard component is commonly used as a suffix in input fields:

use gpui_kit::component::input::{InputState, Input};

let url_state = cx.new(|cx| InputState::new(window, cx).default_value("https://github.com"));

Input::new(&url_state)
    .suffix(
        Clipboard::new("url-clipboard")
            .value_fn({
                let state = url_state.clone();
                move |_, cx| state.read(cx).value()
            })
            .on_copied(|value, window, cx| {
                window.push_notification(format!("URL copied: {}", value), cx)
            })
    )

SlintNo Slint version of this example yet.

#With User Feedback

h_flex()
    .gap_2()
    .child(Label::new("Your API Key:"))
    .child(
        Clipboard::new("feedback")
            .value("sk-1234567890abcdef")
            .accessibility_label("Copy API key")
            .on_copied(|_, window, cx| {
                window.push_notification("API key copied to clipboard", cx)
            })
    )

SlintNo Slint version of this example yet.

#Form Field Integration

use gpui_kit::component::{
    input::{InputState, Input},
    h_flex, label::Label
};

let api_key = "sk-1234567890abcdef";

h_flex()
    .gap_2()
    .items_center()
    .child(Label::new("API Key:"))
    .child(
        Input::new(&input_state)
            .value(api_key)
            .readonly(true)
            .suffix(
                Clipboard::new("api-key-copy")
                    .value(api_key)
                    .on_copied(|_, window, cx| {
                        window.push_notification("API key copied!", cx)
                    })
            )
    )

SlintNo Slint version of this example yet.

#Dynamic Content Copy

struct AppState {
    current_url: String,
}

let app_state = cx.new(|_| AppState {
    current_url: "https://example.com".to_string()
});

Clipboard::new("current-url")
    .value_fn({
        let state = app_state.clone();
        move |_, cx| {
            SharedString::from(state.read(cx).current_url.clone())
        }
    })
    .on_copied(|url, window, cx| {
        window.push_notification(format!("Shared: {}", url), cx)
    })

SlintNo Slint version of this example yet.

#Data Types

The Clipboard component currently supports copying text strings to the clipboard. It uses GPUI’s ClipboardItem::new_string() method, which handles:

Plain text strings
UTF-8 encoded content
Cross-platform clipboard integration

#API Reference

Clipboard

#Clipboard

A copy control. Mirrors GPUI Component's `Clipboard`. Slint cannot write the system clipboard from `.slint`; the host wires `copy-requested`.

Name	Kind	Type	Default
`value`	in	`string`
`size`	in	`ControlSize`	`ControlSize.xsmall`
`copy-requested`	callback	`(value: string)`