Listing of Included Widgets
Button Grid
The wt.ButtonGrid widget provides an array of pushbutton controls that are grouped together. You provide an array of icons and/or text labels for the buttons. It has a single callback function that provides eventdata indicating which button was pushed.
% 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);
buttonGridWidget.BackgroundColor = [.6 .8 1];
buttonGridWidget.Icon = [
"add_24.png"
"delete_24.png"
"play_24.png"
"pause_24.png"
"stop_24.png"
];
buttonGridWidget.Text = [
"Add"
"Delete"
"Play"
"Pause"
"Stop"
];
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;
cbListWidget.ShowSelectAll = true;
Color Selector
The wt.ColorSelector widget enables you to have a color selection edit field along with a button that opens a color selection dialog.
% 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);
colorWidget.Value = [1 0 0];
Contextual View
The wt.ContextualView widget is an advanced component that is visually like a tabpanel but without the tabs. It is intended for use in apps with a modular implementation using the model-view-controller (MVC) design pattern. The ContextualView provides a multiple-view container for recangular contents similar to a uitabgroup. However, unliike uitabgroup, the ContextualView provides only a programmatic interface for launching a component and placing it within the widget.
Datetime Selector
The wt.DatetimeSelector widget provides a combined date and time selection. You may optionally include seconds, time zone, and AM/PM selection. It's value uses a datetime object.
% 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);
Drop Down List Manager
The wt.DropDownListManager widget provides the user to edit and select from a list of names, and it does so within a compact space. You can easily add, remove, or rename items from the dropdown control using the connected buttons.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 50]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
gridObj.RowHeight = {30};
% Create the widget
ddlWidget = wt.DropDownListManager(gridObj);
ddlWidget.AllowRemove = true;
ddlWidget.AllowRename = true;
ddlWidget.Items = [
"Initial Configuration"
"Revision 1"
"Revision 2"
];
ddlWidget.Value = "Revision 1";
File Selector
The wt.FileSelector widget provides a file path edit field along with a button that opens a file selection dialog.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 400 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
fileWidget = wt.FileSelector(gridObj);
fileWidget.Value = matlabroot;
fileWidget.ShowHistory = true;
List Selector (single pane)
The wt.ListSelector 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]);
% Load data
load("usastates.mat","usastates");
stateNames = string({usastates.Name});
% Create the widget
listWidget = wt.ListSelector(gridObj);
listWidget.Items = stateNames;
listWidget.Value = ["Massachusetts","Michigan"];
List Selector Two Pane
The wt.ListSelectorTwoPane 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]);
% Load data
load("usastates.mat","usastates");
stateNames = string({usastates.Name});
% Create the widget
listWidget2 = wt.ListSelectorTwoPane(gridObj);
listWidget2.Items = stateNames;
listWidget2.Value = ["California","Massachusetts","Michigan","Texas"];
Menu Button
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 150]);
gridObj = uigridlayout(figObj,"BackgroundColor",[.6 .8 1]);
gridObj.RowHeight = {'fit','1x'};
gridObj.ColumnWidth = {'1x','fit'};
% Create the widget
mbWidget = wt.MenuButton(gridObj);
mbWidget.Layout.Column = 2;
mbWidget.MenuSelectedFcn = @(src,evt)disp(evt);
names = ["Item 1","Item 2","Item 3"];
menuItems = mbWidget.addMenuItems(names);
Numeric Array
The wt.NumericArray widget combines multiple numeric edit fields that form elements of a 1-dimensional array. It is intended for small arrays typically 2 to 5 values. Optionally you may impose restrictions on the numerical range. You can also force the array to be increasing or decreasing. You can also set orientation as horizontal or vertical.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 50]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
naWidget = wt.NumericArray(gridObj);
naWidget.Value = [10 20 30 40];
Password Field
% 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
passwordWidget = wt.PasswordField(gridObj);
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;
progressWidget.setProgress(0.5, "The task is running...");
Range Field
The wt.RangeField widget combines multiple numeric edit fields that form elements of a 1-dimensional array. It is intended for small arrays typically 2 to 5 values. Optionally you may impose restrictions on the numerical range. You can also force the array to be increasing or decreasing. You can also set orientation as horizontal or vertical.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 50]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
rfWidget = wt.RangeField(gridObj);
rfWidget.Value = [100 500];
Row Entries Table
The wt.RowEntriesTable widget is intended to enable display and editing of simple lists when each item (row) has multiple attributes (columns) to configure. You can add or remove rows using the buttons. You may optionally enable ordering buttons to move items up and down the list.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 220]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
rtWidget = wt.RowEntriesTable(gridObj);
rtWidget.Orderable = true; % Enables the up/down buttons to reorder items
fruitData = cell2table({
"Apple", 195
"Banana", 120
"Lemon", 100
"Lime", 50
"Orange", 130
"Pear", 180
}, "VariableNames", ["Name","Mass (g)"]);
meanMass = mean(fruitData.("Mass (g)"));
fruitData = [
{"Overall Average", meanMass}
fruitData
];
rtWidget.AllowItemRemove(1) = false;
rtWidget.AllowItemOrdering(1) = false;
firstRowStyle = uistyle("BackgroundColor",[.8 .9 .8],"FontWeight","bold","FontColor",[.5 0 1]);
rtWidget.addStyle(firstRowStyle, "row", 1)
pause(2); drawnow
rtWidget.Data = fruitData; drawnow
Search Dropdown
The wt.SliderCheckboxGroup widget provides a set of slider values with checkboxes that enable or disable them. This is useful for setting things like the visibilities of colors or layer transparency that varies between 0 and 1.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 250]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
gridObj.RowHeight = {'fit'};
% Create and configure the widget:
sdWidget = wt.SearchDropDown(gridObj);
sdWidget.Items = ["Primary Current","Secondary Current","Primary Voltage","Secondary Voltage"];
Slider Checkbox Combination Group
The wt.SearchDropdown widget provides an edit field that will search the typed substring from a list of items that pops up in a listbox below.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 150]);
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];
Slider Spinner Combination
The wt.SliderSpinner widget provides a slider alongside a numeric edit field with spinner buttons. It is useful if the user needs to be able to both slide the value or enter it as text.
% 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;
Task Status Table
The wt.TaskStatusTable widget provides a list of process or workflow steps that should be performed in order. It enables stepping forward or back using the included buttons. You can also choose from standard status icons beside each item in the list.
% 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;
Toolbar
The wt.Toolbar widget enables you to construct a lightweight toolstrip or toolbar for controlling your app. You can add buttons with icons and text and create multiple sections.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 660 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;
% 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
toolbarWidget1.Section = [
section1
section2
section3
];
drawnow % to get it to render the width before snapshot occurs
toolbarWidget1.Section(end+1) = section4;
Copyright 2020-2025 The MathWorks, Inc.
+.S8 { border-left: 0.666667px solid rgb(217, 217, 217); border-right: 0.666667px solid rgb(217, 217, 217); border-top: 0px none rgb(33, 33, 33); border-bottom: 0.666667px solid rgb(217, 217, 217); border-radius: 0px 0px 4px 4px; padding: 0px 45px 4px 13px; line-height: 18.004px; min-height: 0px; white-space: nowrap; color: rgb(33, 33, 33); font-family: Menlo, Monaco, Consolas, "Courier New", monospace, Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; }Listing of Included Widgets
Button Grid
The wt.ButtonGrid widget provides an array of pushbutton controls that are grouped together. You provide an array of icons and/or text labels for the buttons. It has a single callback function that provides eventdata indicating which button was pushed.
% 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);
buttonGridWidget.BackgroundColor = [.6 .8 1];
buttonGridWidget.Icon = [
"add_24.png"
"delete_24.png"
"play_24.png"
"pause_24.png"
"stop_24.png"
];
buttonGridWidget.Text = [
"Add"
"Delete"
"Play"
"Pause"
"Stop"
];
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;
cbListWidget.ShowSelectAll = true;
Color Selector
The wt.ColorSelector widget enables you to have a color selection edit field along with a button that opens a color selection dialog.
% 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);
colorWidget.Value = [1 0 0];
Contextual View
The wt.ContextualView widget is an advanced component that is visually like a tabpanel but without the tabs. It is intended for use in apps with a modular implementation using the model-view-controller (MVC) design pattern. The ContextualView provides a multiple-view container for recangular contents similar to a uitabgroup. However, unliike uitabgroup, the ContextualView provides only a programmatic interface for launching a component and placing it within the widget.
Date Slider
The wt.DateSlider widget provides a combined date picker and slider. Its Value uses a datetime object and is compatible with the toolbox support range.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 400 60]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
dateSliderWidget = wt.DateSlider(gridObj);
Date Range Slider
The wt.DateRangeSlider widget provides a combined date picker and range slider. It requires MATLAB R2024b or later and is available for programmatic use only while the App Designer component registry targets R2022a. Its Value uses a two-element datetime row vector.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 900 60]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
dateRangeSliderWidget = wt.DateRangeSlider(gridObj);
Datetime Selector
The wt.DatetimeSelector widget provides a combined date and time selection. You may optionally include seconds, time zone, and AM/PM selection. It's value uses a datetime object.
% 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);
Drop Down List Manager
The wt.DropDownListManager widget provides the user to edit and select from a list of names, and it does so within a compact space. You can easily add, remove, or rename items from the dropdown control using the connected buttons.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 50]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
gridObj.RowHeight = {30};
% Create the widget
ddlWidget = wt.DropDownListManager(gridObj);
ddlWidget.AllowRemove = true;
ddlWidget.AllowRename = true;
ddlWidget.Items = [
"Initial Configuration"
"Revision 1"
"Revision 2"
];
ddlWidget.Value = "Revision 1";
File Selector
The wt.FileSelector widget provides a file path edit field along with a button that opens a file selection dialog.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 400 45]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
fileWidget = wt.FileSelector(gridObj);
fileWidget.Value = matlabroot;
fileWidget.ShowHistory = true;
List Selector (single pane)
The wt.ListSelector 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]);
% Load data
load("usastates.mat","usastates");
stateNames = string({usastates.Name});
% Create the widget
listWidget = wt.ListSelector(gridObj);
listWidget.Items = stateNames;
listWidget.Value = ["Massachusetts","Michigan"];
List Selector Two Pane
The wt.ListSelectorTwoPane 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]);
% Load data
load("usastates.mat","usastates");
stateNames = string({usastates.Name});
% Create the widget
listWidget2 = wt.ListSelectorTwoPane(gridObj);
listWidget2.Items = stateNames;
listWidget2.Value = ["California","Massachusetts","Michigan","Texas"];
Menu Button
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 150]);
gridObj = uigridlayout(figObj,"BackgroundColor",[.6 .8 1]);
gridObj.RowHeight = {'fit','1x'};
gridObj.ColumnWidth = {'1x','fit'};
% Create the widget
mbWidget = wt.MenuButton(gridObj);
mbWidget.Layout.Column = 2;
mbWidget.MenuSelectedFcn = @(src,evt)disp(evt);
names = ["Item 1","Item 2","Item 3"];
menuItems = mbWidget.addMenuItems(names);
Numeric Array
The wt.NumericArray widget combines multiple numeric edit fields that form elements of a 1-dimensional array. It is intended for small arrays typically 2 to 5 values. Optionally you may impose restrictions on the numerical range. You can also force the array to be increasing or decreasing. You can also set orientation as horizontal or vertical.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 50]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
naWidget = wt.NumericArray(gridObj);
naWidget.Value = [10 20 30 40];
Password Field
% 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
passwordWidget = wt.PasswordField(gridObj);
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;
progressWidget.setProgress(0.5, "The task is running...");
Range Field
The wt.RangeField widget combines multiple numeric edit fields that form elements of a 1-dimensional array. It is intended for small arrays typically 2 to 5 values. Optionally you may impose restrictions on the numerical range. You can also force the array to be increasing or decreasing. You can also set orientation as horizontal or vertical.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 50]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
rfWidget = wt.RangeField(gridObj);
rfWidget.Value = [100 500];
Row Entries Table
The wt.RowEntriesTable widget is intended to enable display and editing of simple lists when each item (row) has multiple attributes (columns) to configure. You can add or remove rows using the buttons. You may optionally enable ordering buttons to move items up and down the list.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 220]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
% Create the widget
rtWidget = wt.RowEntriesTable(gridObj);
rtWidget.Orderable = true; % Enables the up/down buttons to reorder items
fruitData = cell2table({
"Apple", 195
"Banana", 120
"Lemon", 100
"Lime", 50
"Orange", 130
"Pear", 180
}, "VariableNames", ["Name","Mass (g)"]);
meanMass = mean(fruitData.("Mass (g)"));
fruitData = [
{"Overall Average", meanMass}
fruitData
];
rtWidget.AllowItemRemove(1) = false;
rtWidget.AllowItemOrdering(1) = false;
firstRowStyle = uistyle("BackgroundColor",[.8 .9 .8],"FontWeight","bold","FontColor",[.5 0 1]);
rtWidget.addStyle(firstRowStyle, "row", 1)
pause(2); drawnow
rtWidget.Data = fruitData; drawnow
Search Dropdown
The wt.SliderCheckboxGroup widget provides a set of slider values with checkboxes that enable or disable them. This is useful for setting things like the visibilities of colors or layer transparency that varies between 0 and 1.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 250 250]);
gridObj = uigridlayout(figObj,[1 1],"BackgroundColor",[.6 .8 1]);
gridObj.RowHeight = {'fit'};
% Create and configure the widget:
sdWidget = wt.SearchDropDown(gridObj);
sdWidget.Items = ["Primary Current","Secondary Current","Primary Voltage","Secondary Voltage"];
Slider Checkbox Combination Group
The wt.SearchDropdown widget provides an edit field that will search the typed substring from a list of items that pops up in a listbox below.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 350 150]);
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];
Slider Spinner Combination
The wt.SliderSpinner widget provides a slider alongside a numeric edit field with spinner buttons. It is useful if the user needs to be able to both slide the value or enter it as text.
% 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;
Task Status Table
The wt.TaskStatusTable widget provides a list of process or workflow steps that should be performed in order. It enables stepping forward or back using the included buttons. You can also choose from standard status icons beside each item in the list.
% 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;
Toolbar
The wt.Toolbar widget enables you to construct a lightweight toolstrip or toolbar for controlling your app. You can add buttons with icons and text and create multiple sections.
% Create a figure with a grid layout
figObj = uifigure("Position",[100 100 660 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;
% 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
toolbarWidget1.Section = [
section1
section2
section3
];
drawnow % to get it to render the width before snapshot occurs
toolbarWidget1.Section(end+1) = section4;
Copyright 2020-2026 The MathWorks, Inc.