Widget Showcase

Interactive components that double as Pluto @bind widgets.

Available Now

Switch

Boolean toggle — works as UI component and @bind widget.

Live Demo

Dark mode

Notifications

Disabled

Usage

julia

# Therapy.jl mode
Switch(checked=true)

# Pluto @bind mode (planned)
# @bind dark SuiteSwitch(; default=false)

Toggle

Pressed/unpressed button — ideal for boolean feature flags.

Live Demo

Usage

julia

# Therapy.jl mode
Toggle(pressed=true, "Bold")
Toggle(variant="outline", "Italic")

Toggle Group

Single or multiple selection from a group of toggle buttons.

Live Demo

Single select

Multiple select

Usage

julia

# Single selection
ToggleGroup(type="single",
    ToggleGroupItem(value="left", "L"),
    ToggleGroupItem(value="center", "C"),
    ToggleGroupItem(value="right", "R")
)

Input & Textarea

Text input fields — bind to String values in Pluto.

Live Demo

Name

Bio

Usage

julia

# Therapy.jl mode
Input(type="email", placeholder="...")
Textarea(placeholder="...")

# Pluto @bind mode (planned)
# @bind name SuiteInput(; default="")
# @bind bio SuiteTextarea(; default="")

Coming Soon

These widgets are designed and will implement the full @bind protocol with index-mapping.

Slider

Planned

Numeric range input with track and thumb.

@bind x SuiteSlider(1:100)

Checkbox

Planned

Boolean checkbox with label.

@bind ok SuiteCheckbox()

Select

Planned

Dropdown selection from options.

@bind lang SuiteSelect([...])

Radio Group

Planned

Radio button group selection.

@bind size SuiteRadioGroup([...])

Date Picker

Planned

Calendar-based date selection.

@bind date SuiteDatePicker()

Color Picker

Planned

Color selection returning RGB.

@bind color SuiteColorPicker()

Learn more about the underlying protocol: