Skip to main content

​
Introduction

Widgets are the building blocks of Iced applications. They provide interactive components that users can see and interact with. Each widget is generic over a Message type, allowing it to produce application-specific messages when interacted with.

​
Core Widget Concepts

​
Message Production

Widgets communicate with your application through messages. When a user interacts with a widget (clicking a button, typing in a text input, etc.), the widget produces a message that your application’s update function can handle. 
enum Message {
    ButtonPressed,
    TextChanged(String),
    SliderMoved(f32),
}

​
Widget Lifecycle

Every widget implements the Widget trait, which provides methods for:
  • Layout: Computing the size and position of the widget
  • Event handling: Responding to user interactions
  • Drawing: Rendering the widget on screen
  • Styling: Customizing the visual appearance

​
Available Widgets

​
Interactive Widgets

Button

A clickable button that produces messages when pressed

Checkbox

A toggleable checkbox for binary choices

Text Input

A field for entering text with support for passwords and validation

Slider

A horizontal bar for selecting values from a range

​
Layout Widgets

Container

A widget that aligns and decorates its contents

Scrollable

A scrollable container for displaying large amounts of content

​
Common Patterns

​
Disabled States

Many widgets can be disabled by not providing an event handler: 
// Enabled button
button("Click me").on_press(Message::ButtonPressed)

// Disabled button
button("Disabled")

​
Styling

All widgets support custom styling through the style method: 
button("Styled")
    .style(|theme, status| {
        button::Style {
            background: Some(Background::Color(Color::from_rgb(0.0, 0.5, 1.0))),
            text_color: Color::WHITE,
            ..button::Style::default()
        }
    })

​
Builder Pattern

Widgets use a fluent builder pattern for configuration: 
text_input("Placeholder", &value)
    .width(Length::Fill)
    .padding(10)
    .size(16)
    .on_input(Message::TextChanged)
    .on_submit(Message::Submitted)

​
Next Steps

Button

Learn about button widgets and interactions

Layout Guide

Understand how to arrange widgets

Build docs developers (and LLMs) love

Get started for freeTalk to us