Widgets Toolbox - MATLAB App Designer Components - Examples
Widgets Toolbox helps you efficiently develop advanced user interfaces in MATLAB and App Designer. Widgets combine existing control functionalities together into larger, reusable, common functionality to accelerate development of graphical user interfaces.
Copyright 2020-2022 The MathWorks, Inc.
Button Grid
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 75]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
buttonGridWidget = wt.ButtonGrid(gridObj);
% Configure the widget
buttonGridWidget.BackgroundColor = [.6 .8 1];
% Add optional icons
buttonGridWidget.Icon = [
"add_24.png"
"delete_24.png"
"play_24.png"
"pause_24.png"
"stop_24.png"
];
% Add optional text
buttonGridWidget.Text = [
"Add"
"Delete"
"Play"
"Pause"
"Stop"
];
% Add optional tooltip
buttonGridWidget.Tooltip = [
"Press to Add"
"Press to Delete"
"Press to Play"
"Press to Pause"
"Press to Stop"
];
% Assign a callback
buttonGridWidget.ButtonPushedFcn = @(src,evt)disp(evt)
buttonGridWidget =
ButtonGrid with properties:
+.S12 { margin: 15px 10px 5px 4px; padding: 0px; line-height: 18px; min-height: 0px; white-space: pre-wrap; color: rgb(33, 33, 33); font-family: Helvetica, Arial, sans-serif; font-style: normal; font-size: 17px; font-weight: 700; text-align: left; } 
Widgets Toolbox - MATLAB App Designer Components - Examples
Widgets Toolbox helps you efficiently develop advanced user interfaces in MATLAB and App Designer. Widgets combine existing control functionalities together into larger, reusable, common functionality to accelerate development of graphical user interfaces.
Copyright 2020-2022 The MathWorks, Inc.
Button Grid
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 75]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
buttonGridWidget = wt.ButtonGrid(gridObj);
% Configure the widget
buttonGridWidget.BackgroundColor = [.6 .8 1];
% Add optional icons
buttonGridWidget.Icon = [
"add_24.png"
"delete_24.png"
"play_24.png"
"pause_24.png"
"stop_24.png"
];
% Add optional text
buttonGridWidget.Text = [
"Add"
"Delete"
"Play"
"Pause"
"Stop"
];
% Add optional tooltip
buttonGridWidget.Tooltip = [
"Press to Add"
"Press to Delete"
"Press to Play"
"Press to Pause"
"Press to Stop"
];
% Assign a callback
buttonGridWidget.ButtonPushedFcn = @(src,evt)disp(evt)
Checkbox List
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 200]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
cbListWidget = wt.CheckboxList(gridObj);
% Configure the widget
cbListWidget.Items = [
"Boston"
"Chicago"
"Houston"
"Los Angeles"
"Miami"
"New York"
"Seattle"
];
cbListWidget.Value(3) = false;
% This is optional (default is false)
cbListWidget.ShowSelectAll = true;
% Assign a callback
cbListWidget.ValueChangedFcn = @(src,evt)disp(evt)
Checkbox List
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 200]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
cbListWidget = wt.CheckboxList(gridObj);
% Configure the widget
cbListWidget.Items = [
"Boston"
"Chicago"
"Houston"
"Los Angeles"
"Miami"
"New York"
"Seattle"
];
cbListWidget.Value(3) = false;
% This is optional (default is false)
cbListWidget.ShowSelectAll = true;
% Assign a callback
cbListWidget.ValueChangedFcn = @(src,evt)disp(evt)
Color Selector
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
colorWidget = wt.ColorSelector(gridObj);
% Configure the widget
colorWidget.Value = [1 0 0];
% Assign a callback
colorWidget.ValueChangedFcn = @(src,evt)disp(evt)
Color Selector
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
colorWidget = wt.ColorSelector(gridObj);
% Configure the widget
colorWidget.Value = [1 0 0];
% Assign a callback
colorWidget.ValueChangedFcn = @(src,evt)disp(evt)
If you want to have only the button with no edit field:
% Change the color
colorWidget.Value = [0 1 0];
% Turn off the edit field
colorWidget.ShowEditField = false;
% Make it a sensible width
gridObj.ColumnWidth = {27}
If you want to have only the button with no edit field:
% Change the color
colorWidget.Value = [0 1 0];
% Turn off the edit field
colorWidget.ShowEditField = false;
% Make it a sensible width
gridObj.ColumnWidth = {27}
Datetime Selector
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
dateWidget = wt.DatetimeSelector(gridObj)
Datetime Selector
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
dateWidget = wt.DatetimeSelector(gridObj)
If you want to configure the widget differently:
% Configure the widget
dateWidget.DateFormat = "MM/dd/uuuu";
dateWidget.DisabledDaysOfWeek = ["Saturday" "Sunday"];
dateWidget.Value = datetime("now","TimeZone","local");
dateWidget.ShowSeconds = "on";
dateWidget.ShowAMPM = "off";
File Selector
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
fileWidget = wt.FileSelector(gridObj);
% Configure the widget
fileWidget.Value = matlabroot;
% Assign a callback
fileWidget.ValueChangedFcn = @(src,evt)disp(evt)
If you want to configure the widget differently:
% Configure the widget
dateWidget.DateFormat = "MM/dd/uuuu";
dateWidget.DisabledDaysOfWeek = ["Saturday" "Sunday"];
dateWidget.Value = datetime("now","TimeZone","local");
dateWidget.ShowSeconds = "on";
dateWidget.ShowAMPM = "off";
File Selector
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
fileWidget = wt.FileSelector(gridObj);
% Configure the widget
fileWidget.Value = matlabroot;
% Assign a callback
fileWidget.ValueChangedFcn = @(src,evt)disp(evt)
If you want to have a dropdown button to show recent history:
fileWidget.ShowHistory = true;
List Selector (single pane)
The List Selector widget is intended for adding items to a list from a known set. You can optionally enable reordering the items, and add custom buttons.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 215]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
listWidget = wt.ListSelector(gridObj);
listWidget.Items = ["California","Massachusetts","Michigan","Texas"];
listWidget.Value = ["Massachusetts","Michigan"];
% Assign a callback
listWidget.ValueChangedFcn = @(src,evt)disp(evt)
If you want to have a dropdown button to show recent history:
fileWidget.ShowHistory = true;
List Selector (single pane)
The List Selector widget is intended for adding items to a list from a known set. You can optionally enable reordering the items, and add custom buttons.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 215]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
listWidget = wt.ListSelector(gridObj);
listWidget.Items = ["California","Massachusetts","Michigan","Texas"];
listWidget.Value = ["Massachusetts","Michigan"];
% Assign a callback
listWidget.ValueChangedFcn = @(src,evt)disp(evt)
You can also add your own custom buttons:
listWidget.UserButtons.Icon = ["plot_24.png","play_24.png"];
listWidget.UserButtons.ButtonHeight = {25 25};
listWidget.ButtonPushedFcn = @(src,evt)disp(evt);
List Selector Two Pane
The List Selector Two-Pane widget is similar to the one-pane variant. It is intended for adding items to a list from a known set. In this case, the set of available items is displayed in a list on the left side, and items are selectively added to the right list.
Again you can optionally enable reordering the items and add custom buttons.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 300 215]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
listWidget2 = wt.ListSelectorTwoPane(gridObj);
listWidget2.Items = ["California","Massachusetts","Michigan","Texas"];
listWidget2.Value = ["Massachusetts","Michigan"];
Password Field
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 45]);
gridObj = uigridlayout(figObj,[1 2],"BackgroundColor",[.6 .8 1]);
gridObj.ColumnWidth = {'fit','1x'};
% Add label
uilabel(gridObj,"Text","Password:");
This component won't show in the preview, but it will create a password field with text displayed as dots.
% Create the widget
passwordWidget = wt.PasswordField(gridObj);
% Configure the widget
passwordWidget.Value = "MathWorks";
Progress Bar
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 300 60]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
progressWidget = wt.ProgressBar(gridObj);
% Configure the widget
progressWidget.ShowCancel = true;
% Assign a callback
progressWidget.CancelPressedFcn = @(h,e)disp("Cancel Pressed!")
You can also add your own custom buttons:
listWidget.UserButtons.Icon = ["plot_24.png","play_24.png"];
listWidget.UserButtons.ButtonHeight = {25 25};
listWidget.ButtonPushedFcn = @(src,evt)disp(evt);
List Selector Two Pane
The List Selector Two-Pane widget is similar to the one-pane variant. It is intended for adding items to a list from a known set. In this case, the set of available items is displayed in a list on the left side, and items are selectively added to the right list.
Again you can optionally enable reordering the items and add custom buttons.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 300 215]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
listWidget2 = wt.ListSelectorTwoPane(gridObj);
listWidget2.Items = ["California","Massachusetts","Michigan","Texas"];
listWidget2.Value = ["Massachusetts","Michigan"];
Password Field
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 45]);
gridObj = uigridlayout(figObj,[1 2],"BackgroundColor",[.6 .8 1]);
gridObj.ColumnWidth = {'fit','1x'};
% Add label
uilabel(gridObj,"Text","Password:");
This component won't show in the preview, but it will create a password field with text displayed as dots.
% Create the widget
passwordWidget = wt.PasswordField(gridObj);
% Configure the widget
passwordWidget.Value = "MathWorks";
Progress Bar
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 300 60]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
progressWidget = wt.ProgressBar(gridObj);
% Configure the widget
progressWidget.ShowCancel = true;
% Assign a callback
progressWidget.CancelPressedFcn = @(h,e)disp("Cancel Pressed!")
% Start the progress bar
progressWidget.startProgress("The task is starting...");
% Wait some time to simulate a running task
pause(2)
% Update the task progress
progressWidget.setProgress(0.5, "The task is running...");
Then, when the task is done:
% Mark the task finished
progressWidget.finishProgress("The task is finished");
If you want an indeteriminate progress bar:
% Mark the task finished
progressWidget.Indeterminate = true;
% Start the progress bar
progressWidget.startProgress("The task is running...");
Slider Checkbox Combination Group
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 125]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
sliderCheckboxWidget = wt.SliderCheckboxGroup(gridObj);
% Configure the widget
sliderCheckboxWidget.Name = ["Red", "Green", "Blue", "Alpha"];
sliderCheckboxWidget.CheckboxWidth = 100
% Start the progress bar
progressWidget.startProgress("The task is starting...");
% Wait some time to simulate a running task
pause(2)
% Update the task progress
progressWidget.setProgress(0.5, "The task is running...");
Then, when the task is done:
% Mark the task finished
progressWidget.finishProgress("The task is finished");
If you want an indeteriminate progress bar:
% Mark the task finished
progressWidget.Indeterminate = true;
% Start the progress bar
progressWidget.startProgress("The task is running...");
Slider Checkbox Combination Group
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 125]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
sliderCheckboxWidget = wt.SliderCheckboxGroup(gridObj);
% Configure the widget
sliderCheckboxWidget.Name = ["Red", "Green", "Blue", "Alpha"];
sliderCheckboxWidget.CheckboxWidth = 100
sliderCheckboxWidget.Value = [0.8, 0.3, 0, 1];
sliderCheckboxWidget.State = [true, true, false, true];
% Assign a callback
sliderCheckboxWidget.ValueChangedFcn = @(src,evt)disp(evt)
sliderCheckboxWidget.Value = [0.8, 0.3, 0, 1];
sliderCheckboxWidget.State = [true, true, false, true];
% Assign a callback
sliderCheckboxWidget.ValueChangedFcn = @(src,evt)disp(evt)
Slider Spinner Combination
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 70]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
sliderSpinnerWidget = wt.SliderSpinner(gridObj);
% Configure the widget
sliderSpinnerWidget.Limits = [-10 30];
sliderSpinnerWidget.RoundFractionalValues = "off";
sliderSpinnerWidget.Step = 0.5;
sliderSpinnerWidget.Value = 16.5;
% Assign a callback
sliderSpinnerWidget.ValueChangedFcn = @(src,evt)disp(evt)
Slider Spinner Combination
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 70]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
sliderSpinnerWidget = wt.SliderSpinner(gridObj);
% Configure the widget
sliderSpinnerWidget.Limits = [-10 30];
sliderSpinnerWidget.RoundFractionalValues = "off";
sliderSpinnerWidget.Step = 0.5;
sliderSpinnerWidget.Value = 16.5;
% Assign a callback
sliderSpinnerWidget.ValueChangedFcn = @(src,evt)disp(evt)
Task Status Table
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 225]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
taskStatusWidget = wt.TaskStatusTable(gridObj);
% Configure the widget
taskStatusWidget.Items = [
"Import Data"
"Preprocess Data"
"Analyze Data"
"Plot Results"
"Save Results"
];
taskStatusWidget.Status = [
"complete"
"warning"
"running"
"none"
"none"
];
taskStatusWidget.SelectedIndex = 3;
% Assign a callback
taskStatusWidget.ButtonPushedFcn = @(src,evt)disp(evt)
Task Status Table
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 225]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
taskStatusWidget = wt.TaskStatusTable(gridObj);
% Configure the widget
taskStatusWidget.Items = [
"Import Data"
"Preprocess Data"
"Analyze Data"
"Plot Results"
"Save Results"
];
taskStatusWidget.Status = [
"complete"
"warning"
"running"
"none"
"none"
];
taskStatusWidget.SelectedIndex = 3;
% Assign a callback
taskStatusWidget.ButtonPushedFcn = @(src,evt)disp(evt)
Toolbar
Horizontal Sections
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 120]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
toolbarWidget1 = wt.Toolbar(gridObj);
% Create a horizontal section
section1 = wt.toolbar.HorizontalSection();
section1.Title = "NORMAL BUTTONS";
section1.addButton("open_24.png", "Open");
section1.addButton("save_24.png", "Save");
% Create a horizontal section with state buttons
section2 = wt.toolbar.HorizontalSection();
section2.Title = "STATE BUTTONS";
stateButton1 = section2.addStateButton("","Mode 1");
stateButton2 = section2.addStateButton("","Mode 2");
stateButton3 = section2.addStateButton("","Mode 3");
% Set the state of the buttons
stateButton1.Value = true;
stateButton2.Value = false;
stateButton3.Value = false;
% Attach the horizontal sections to the toolbar
toolbarWidget1.Section = [
section1
section2
];
% Assign a callback
toolbarWidget1.ButtonPushedFcn = @(src,evt)disp(evt)
Toolbar
Horizontal Sections
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 120]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
toolbarWidget1 = wt.Toolbar(gridObj);
% Create a horizontal section
section1 = wt.toolbar.HorizontalSection();
section1.Title = "NORMAL BUTTONS";
section1.addButton("open_24.png", "Open");
section1.addButton("save_24.png", "Save");
% Create a horizontal section with state buttons
section2 = wt.toolbar.HorizontalSection();
section2.Title = "STATE BUTTONS";
stateButton1 = section2.addStateButton("","Mode 1");
stateButton2 = section2.addStateButton("","Mode 2");
stateButton3 = section2.addStateButton("","Mode 3");
% Set the state of the buttons
stateButton1.Value = true;
stateButton2.Value = false;
stateButton3.Value = false;
% Attach the horizontal sections to the toolbar
toolbarWidget1.Section = [
section1
section2
];
% Assign a callback
toolbarWidget1.ButtonPushedFcn = @(src,evt)disp(evt)
Toolbar
Vertical sections
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 375 130]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
toolbarWidget2 = wt.Toolbar(gridObj);
% Create a horizontal section with vertical subsection
section3 = wt.toolbar.HorizontalSection();
section3.Title = "MIXED HORIZONTAL / VERTICAL";
section3.addButton("left_24.png","");
section3.addButton("right_24.png","");
% Create the vertical subsection
section3v1 = section3.addVerticalSection();
section3v1.addButton("play_24.png","Play");
section3v1.addButton("stop_24.png","Stop");
% Add a manual component to the vertical section
sliderObj = uislider("Parent",[]);
section3v1.Component(end+1) = sliderObj;
% Attach a callback to the slider
% This is required for manually adding components
sliderObj.ValueChangedFcn = @(src,evt)disp(evt);
% Create more horizontal items
section3.addButton("pause_24.png","Pause");
% Add another basic section
section4 = wt.toolbar.HorizontalSection();
section4.Title = "HELP";
section4.addButton('help_24.png','Help');
% Attach the horizontal sections to the toolbar
toolbarWidget2.Section = [
section3
section4
];
% Assign a callback
toolbarWidget2.ButtonPushedFcn = @(src,evt)disp(evt)
Toolbar
Vertical sections
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 375 130]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
toolbarWidget2 = wt.Toolbar(gridObj);
% Create a horizontal section with vertical subsection
section3 = wt.toolbar.HorizontalSection();
section3.Title = "MIXED HORIZONTAL / VERTICAL";
section3.addButton("left_24.png","");
section3.addButton("right_24.png","");
% Create the vertical subsection
section3v1 = section3.addVerticalSection();
section3v1.addButton("play_24.png","Play");
section3v1.addButton("stop_24.png","Stop");
% Add a manual component to the vertical section
sliderObj = uislider("Parent",[]);
section3v1.Component(end+1) = sliderObj;
% Attach a callback to the slider
% This is required for manually adding components
sliderObj.ValueChangedFcn = @(src,evt)disp(evt);
% Create more horizontal items
section3.addButton("pause_24.png","Pause");
% Add another basic section
section4 = wt.toolbar.HorizontalSection();
section4.Title = "HELP";
section4.addButton('help_24.png','Help');
% Attach the horizontal sections to the toolbar
toolbarWidget2.Section = [
section3
section4
];
% Assign a callback
toolbarWidget2.ButtonPushedFcn = @(src,evt)disp(evt)