A button that sends back the same value every time that it is clicked.

You can use it to trigger reactive cells.

Examples

In one cell:

@bind go Button("Go!")

and in a second cell:

begin
    # reference the bound variable - clicking the button will run this cell
    go

    md"My favorite number is 0.8537124160420135!"
end

A checkbox to choose a Boolean value true/false.

Examples

@bind programming_is_fun CheckBox()

@bind julia_is_fun CheckBox(default=true)

md"Would you like the thing? $(@bind enable_thing CheckBox())"

Button to download a Julia object as a file from the browser.

See DownloadButton to do the opposite.

Examples

DownloadButton("Roses are red,", "novel.txt")

DownloadButton(UInt8[0xff, 0xd8, 0xff, 0xe1, 0x00, 0x69], "raw.dat")

import JSON
DownloadButton(JSON.json(Dict("name" => "merlijn", "can_cook" => true)), "staff.json")

A file upload box. The chosen file will be read by the browser, and the bytes are sent back to Julia.

The optional accept argument can be an array of MIMEs. The user can only select files with these MIME. If only image/* MIMEs are allowed, then smartphone browsers will open the camera instead of a file browser.

Examples

@bind file_data FilePicker()

file_data["data"]

You can limit the allowed MIME types:

@bind image_data FilePicker([MIME("image/jpg"), MIME("image/png")])
# and use MIME groups:
@bind image_data FilePicker([MIME("image/*")])

A multi-selector (<select multi>) - the user can choose one or more of the options, an array of `Strings.

See Select for a version that allows only one selected item.

options can also be an array of pairs key::String => value::Any. The key is returned via @bind; the value is shown.

See the Mozilla docs about select

Examples

@bind veg MultiSelect(["potato", "carrot"])

@bind veg MultiSelect(["potato" => "🥔", "carrot" => "🥕"])

@bind veg MultiSelect(["potato" => "🥔", "carrot" => "🥕"], default=["carrot"])

A box where you can type in a number, within a specific range.

Examples

@bind x NumberField(1:10)

@bind x NumberField(0.00 : 0.01 : 0.30)

@bind x NumberField(1:10; default=8)

A group of radio buttons - the user can choose one of the options, an array of Strings.

options can also be an array of pairs key::String => value::Any. The key is returned via @bind; the value is shown.

Examples

@bind veg Radio(["potato", "carrot"])

@bind veg Radio(["potato" => "🥔", "carrot" => "🥕"])

@bind veg Radio(["potato" => "🥔", "carrot" => "🥕"], default="carrot")

Resource(src::String, mime=mime_from_filename(src)[, html_attributes::Pair...])

A container for a URL-addressed resource that displays correctly in rich IDEs.

Examples

Resource("https://julialang.org/assets/infra/logo.svg")

Resource("https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm", :width => 100)

md"""
This is what a duck sounds like: $(Resource("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"))
md"""

A dropdown menu (<select>) - the user can choose one of the options, an array of Strings.

See MultiSelect for a version that allows multiple selected items.

options can also be an array of pairs key::String => value::Any. The key is returned via @bind; the value is shown.

See the Mozilla docs about select

Examples

@bind veg Select(["potato", "carrot"])

@bind veg Select(["potato" => "🥔", "carrot" => "🥕"])

@bind veg Select(["potato" => "🥔", "carrot" => "🥕"], default="carrot")

A Slider on the given range.

Examples

@bind x Slider(1:10)

@bind x Slider(0.00 : 0.01 : 0.30)

@bind x Slider(1:10; default=8, show_value=true)

A text input (<input type="text">) - the user can type text, the text is return as String via @bind.

If dims is a tuple (cols::Integer, row::Integer), a <textarea> will be shown, with the given dimensions

Use default to set the initial value.

See the Mozilla docs about <input type="text"> and <textarea>

Examples

@bind poem TextField()

@bind poem TextField((30,5); default="Hello JuliaCon!")

Create a Resource for a local file (a base64 encoded data URL is generated).

WARNING

LocalResourcewill not work when you share the script/notebook with someone else, unless they have those resources at exactly the same location on their file system.

Recommended alternatives (images)

1. Go to imgur.com and drag&drop the image to the page. Right click on the image, and select "Copy image location". You can now use the image like so: PlutoUI.Resource("https://i.imgur.com/SAzsMMA.jpg").
2. If your notebook is part of a git repository, place the image in the repository and use a relative path: PlutoUI.LocalResource("../images/cat.jpg").

Examples

Resource("./cat.jpg")

Resource("/home/fons/Videos/nijmegen.mp4", :width => 200)

md"""
This is what a duck sounds like: $(Resource("../data/hannes.mp3"))
md"""

Attempt to find the MIME pair corresponding to the extension of a filename. Defaults to text/plain.