Complete Widget Reference

This page provides a complete reference of all widgets available in Iced, organized by category.

Layout Widgets

Widgets for arranging and organizing other widgets.

Row

Module: iced::widget::row Distributes children horizontally.

row![item1, item2, item3].spacing(10)

Column

Module: iced::widget::column Distributes children vertically.

column![item1, item2, item3].spacing(10)

Container

Module: iced::widget::container Wraps a single child with padding, alignment, and styling.

container(content).padding(20).center(Length::Fill)

Scrollable

Module: iced::widget::scrollable Provides scrollable content with scrollbars.

scrollable(column![/* many items */]).height(Length::Fill)

Stack

Module: iced::widget::stack (via macro) Layers children on top of each other.

stack![background, foreground, overlay]

Grid

Module: iced::widget::grid (via macro) Arranges children in a grid layout.

grid![item1, item2, item3].spacing(10)

Float

Module: iced::widget::float Positions an element floating over another.

Float::new(base_element, floating_element)
    .offset([10.0, 10.0])

Space

Module: iced::widget::space Creates empty space for layout purposes.

space().width(Length::Fill)  // Horizontal spacer
space().height(100)           // Vertical space

Input Widgets

Widgets for user interaction and input.

Button

Module: iced::widget::button Clickable button that produces messages.

button("Click me").on_press(Message::Clicked)

TextInput

Module: iced::widget::text_input Single-line text input field.

text_input("Placeholder", &value).on_input(Message::Changed)

TextEditor

Module: iced::widget::text_editor Multi-line text editor with advanced features.

text_editor(&content)
    .on_action(Message::EditorAction)
    .height(Length::Fill)

Checkbox

Module: iced::widget::checkbox Boolean checkbox input.

checkbox("Accept terms", is_checked)
    .on_toggle(Message::CheckboxToggled)

Radio

Module: iced::widget::radio Radio button for selecting one option from a group.

radio("Option A", OptionA, Some(selected), Message::OptionSelected)

Toggler

Module: iced::widget::toggler Toggle switch for boolean values.

toggler(is_enabled)
    .label("Enable feature")
    .on_toggle(Message::Toggled)

Slider

Module: iced::widget::slider Horizontal slider for selecting numeric values.

slider(0.0..=100.0, value, Message::SliderChanged)

VerticalSlider

Module: iced::widget::vertical_slider Vertical slider for selecting numeric values.

vertical_slider(0.0..=100.0, value, Message::Changed)
    .height(200)

PickList

Module: iced::widget::pick_list Dropdown selection list.

pick_list(
    vec!["Option 1", "Option 2", "Option 3"],
    Some(selected),
    Message::OptionSelected
)

ComboBox

Module: iced::widget::combo_box Searchable dropdown with text input.

combo_box(&state, "Search...", &selection, Message::Selected)
    .on_input(Message::InputChanged)

Display Widgets

Widgets for displaying content.

Text

Module: iced::widget::text Displays styled text.

text("Hello, Iced!").size(20).color(color!(0x0000ff))

Image

Module: iced::widget::image (feature: image) Displays raster images.

image("path/to/image.png")
    .width(Length::Fill)
    .height(Length::Fill)

Svg

Module: iced::widget::svg (feature: svg) Renders SVG vector graphics.

svg("path/to/image.svg")
    .width(100)
    .height(100)

ProgressBar

Module: iced::widget::progress_bar Displays progress as a bar.

progress_bar(0.0..=100.0, 45.0)

Rule

Module: iced::widget::rule Draws horizontal or vertical lines.

Rule::horizontal(10)  // Horizontal line with padding
Rule::vertical(10)    // Vertical line

QRCode

Module: iced::widget::qr_code (feature: qr_code) Generates and displays QR codes.

qr_code("https://example.com")
    .cell_size(4)

Advanced Widgets

Specialized widgets for complex use cases.

Canvas

Module: iced::widget::canvas (feature: canvas) Custom 2D graphics drawing.

canvas(MyCanvasProgram::new())
    .width(Length::Fill)
    .height(Length::Fill)

Shader

Module: iced::widget::shader (feature: wgpu) Custom shader rendering.

shader(my_shader_program)
    .width(Length::Fill)
    .height(Length::Fill)

PaneGrid

Module: iced::widget::pane_grid Resizable pane layout.

pane_grid(&state, |pane, content, is_maximized| {
    pane_grid::Content::new(content)
        .title_bar(pane_grid::TitleBar::new(format!("Pane {}", pane)))
})

Table

Module: iced::widget::table Displays tabular data.

table(&state, headers, |row_index, column_index| {
    text(format!("Cell {},{}", row_index, column_index)).into()
})

Module: iced::widget::tooltip Adds hover tooltips to widgets.

tooltip(
    button("Hover me"),
    "This is a tooltip",
    tooltip::Position::Bottom
)

MouseArea

Module: iced::widget::mouse_area Captures mouse events on an area.

mouse_area(content)
    .on_press(Message::Pressed)
    .on_release(Message::Released)
    .on_enter(Message::Entered)
    .on_exit(Message::Exited)

Responsive

Module: iced::widget::responsive Creates responsive layouts based on available space.

responsive(|size| {
    if size.width > 600.0 {
        wide_layout().into()
    } else {
        narrow_layout().into()
    }
})

Markdown

Module: iced::widget::markdown (feature: markdown) Renders Markdown content.

markdown(
    &items,
    markdown::Settings::default(),
    markdown::Style::from_palette(theme.palette())
)

Sensor

Module: iced::widget::sensor Detects layout changes.

sensor(content)
    .on_resize(|size| Message::Resized(size))

Themer

Module: iced::widget::themer Applies custom themes to children.

themer(custom_theme, content)

Module: iced::widget::pin Pins a widget to prevent it from being dropped.

Pin::new(widget)

Lazy Widgets

Feature: lazy Lazy widgets defer computation until needed.

lazy

Creates a lazy widget that only computes its view when dependencies change.

lazy(dependencies, |deps| expensive_view(deps))

lazy_responsive

Combines lazy evaluation with responsive layout.

lazy_responsive(dependencies, |deps, size| {
    expensive_responsive_view(deps, size)
})

Keyed Widgets

Module: iced::widget::keyed Keyed variants preserve widget state based on keys.

keyed_column

Column that preserves child state using keys.

keyed_column(
    items.iter().map(|item| {
        (item.id, view_item(item).into())
    })
)

Helper Functions

These are found in iced::widget:

text!

Formats text like format! macro.

text!("Count: {}", count)

row!

Creates a row with the given children.

row![child1, child2, child3]

column!

Creates a column with the given children.

column![child1, child2, child3]

stack!

Creates a stack with the given children.

stack![background, content, overlay]

grid!

Creates a grid with the given children.

grid![cell1, cell2, cell3]

Forms

TextInput, TextEditor
Button
Checkbox, Radio, Toggler
Slider, VerticalSlider
PickList, ComboBox

Button
PickList
PaneGrid
Scrollable

Data Display

Text
Table
ProgressBar
Canvas (for charts)
Markdown

Media

Image
Svg
Canvas
Shader

Layout

Row, Column
Container
Stack
Grid
Scrollable
PaneGrid

Next Steps

Explore individual widget pages for detailed documentation
Learn about styling and theming
Check out layout patterns
Browse example applications

Getting Started

Core Concepts

Guides

Widgets

Advanced

​Layout Widgets

​Row

​Column

​Container

​Scrollable

​Stack

​Grid

​Float

​Space

​Input Widgets

​Button

​TextInput

​TextEditor

​Checkbox

​Radio

​Toggler

​Slider

​VerticalSlider

​PickList

​ComboBox

​Display Widgets

​Text

​Image

​Svg

​ProgressBar

​Rule

​QRCode

​Advanced Widgets

​Canvas

​Shader

​PaneGrid

​Table

​Tooltip

​MouseArea

​Responsive

​Markdown

​Sensor

​Themer

​Pin

​Lazy Widgets

​lazy

​lazy_responsive

​Keyed Widgets

​keyed_column

​Helper Functions

​text!

​row!

​column!

​stack!

​grid!

​Widget Categories by Use Case

​Forms

​Navigation

​Data Display

​Media

​Layout

​Next Steps

Build docs developers (and LLMs) love