Toggle Button

Nov 21, 2022
2 minutes to read

The Toggle Button (ToggleButton) is a button used to select one of two mutually exclusive options/values.

Button State

The Checked property specifies the button’s state. When its value changes, the Toggle Button fires the CheckedChanged event.

Button Text

Use the CheckedText and UncheckedText properties to specify the button’s text for checked and unchecked states respectively. By default, these properties are set to ON and OFF respectively.

The text can be displayed outside or inside the toggle button. Use the TextPosition property to specify this setting.

Value	Description	Screenshot
Outside	Displays the text outside the toggle button.
Inside	Displays the text inside the toggle button.
None	Hides the text.

csharp

using DevExpress.UITemplates.Collection.Editors.ToggleButton;

// Displays the text inside the toggle button.
toggleButton1.TextPosition = Position.Inside;

Toggle Button Size

Use the ButtonSize property to specify the size of toggle buttons.

Value	Screenshot
Small
Default
Large

Switch Thumb Customization

Use IconImageOptions property to specify a custom image as a switch thumb. You can choose an image from the DevExpress Image Gallery, which is packed with thousands of high-quality SVG and PNG icons, or you can specify your own graphics.

HTML & CSS Template Customization

Toggle Buttons are created with HTML & CSS templates. This allows you to create fully custom buttons. Template customizations are handled with our HTML Template Editor that is integrated into the Visual Studio IDE. This tool uses an embedded Syntax Editor with autocomplete, tag navigation, and preview.