Customizing the ON/ OFF text in Syncfusion Switch Component

2 mins read

The Syncfusion Switch component is a user interface element that allows users to toggle between two states, such as ON and OFF. It is a part of the Syncfusion Blazor UI component library, which provides a wide range of interactive UI components for developing web applications.

Adding Custom Text to the Switch Component

To customize the text displayed on the Switch component, you can use the CssClass property to define a custom class and then apply specific styles to alter the appearance of the switch’s inner content. Below is an example of how to add custom text to the Syncfusion Switch component:

@using Syncfusion.Blazor.Buttons

<SfSwitch CssClass="handle-text" @bind-Checked="isHandleChecked"></SfSwitch>

@code {
    private bool isHandleChecked = false;
}

<style>
/* Customize Handle and Bar Switch */
.e-switch-wrapper.handle-text {
  width: 58px;
  height: 24px;
}

.e-switch-wrapper.handle-text .e-switch-handle {
  width: 26px;
  height: 20px;
  left: 2px;
  background-color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.handle-text .e-switch-handle.e-switch-active {
  left: 46px;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-text:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #4d841d;
  border-color: #4d841d;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-off {
  background-color: #e3165b;
  border-color: #e3165b;
}

.e-switch-wrapper.handle-text .e-switch-inner:after,
.e-switch-wrapper.handle-text .e-switch-inner:before {
  font-size: 10px;
  position: absolute;
  line-height: 21px;
  font-family: "Helvetica", sans-serif;
  z-index: 1;
  height: 100%;
  transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.e-switch-wrapper.handle-text .e-switch-inner:before {
  content: "OFF";
  color: #e3165b;
  left: 3px;
}

.e-switch-wrapper.handle-text .e-switch-inner:after {
  content: "ON";
  right: 5px;
  color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:before {
  color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:after {
  color: #4d841d;
}

.e-switch-wrapper.handle-text:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active) {
  background-color: #fff;
}
</style>

In this example, the handle-text class is applied to the SfSwitch component. The styles are then defined within the <style> tag, where the :before and :after pseudo-elements are used to insert the “OFF” and “ON” text, respectively. The color property is used to set the text color, and the left and right properties are used to position the text within the switch.

Styling Considerations

When customizing the text, it is important to ensure that the styles do not interfere with the switch’s functionality and that the text is clearly visible in both ON and OFF states. The colors and positions can be adjusted to match the application’s design requirements.

Conclusion

Customizing the text in the Syncfusion Switch component can enhance the user experience by providing a clear indication of the switch’s state. By using CSS classes and pseudo-elements, developers can easily add custom text and style the switch to fit the design of their application.

Demo

To see a live demonstration of the above implementation, please visit the following sample link: Syncfusion Switch Component

Additional References

Syncfusion Blazor Switch Documentation: Syncfusion Blazor Switch
CSS Pseudo-elements: MDN Web Docs
Blazor Documentation: Blazor Overview

Did you find this information helpful?

Yes

Comments (0)