Directory

← Back

Switch

Switch is a decorated toggle checkbox.

Author

Contributors

Rating

Switch is basically a decorated checkbox with a very similar look to the switch component found on iOS and Android.

The server-side API extends the Vaadin CheckBox with added methods for enabling/disabling client-side animations. The state of the Switch can be changed with mouse (click and/or drag), keyboard (focus with tab, use space to change the value) or by sliding the component via touch gestures in Mobile Safari and Android browser.

Starting from version 1.0.0 the add-on has two additional built in styles ("compact" and "holodeck"). Navigate to the online demo to see them in action.

Sample code

Switch s = new Switch();
s.addListener(new Property.ValueChangeListener() {
    public void valueChange(ValueChangeEvent event) {
        mainWindow.showNotification(event.getProperty().getValue()
                .toString());
    }
});
s.setImmediate(true);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

First version to support Vaadin 8

Released
2017-03-28
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.2+ in 2.0.3
Vaadin 6.6+ in 1.0.1
Vaadin 6.5 in 0.93
Vaadin 6.4 in 0.93
Vaadin 6.3 in 0.93
Vaadin 6.2 in 0.93
Vaadin 6.1 in 0.93
Vaadin 6.0 in 0.93
Vaadin 6.2+ in 0.92
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Microsoft Edge

Switch - Vaadin Add-on Directory

Switch is a decorated toggle checkbox. Switch - Vaadin Add-on Directory
Switch is basically a decorated checkbox with a very similar look to the switch component found on iOS and Android. The server-side API extends the Vaadin CheckBox with added methods for enabling/disabling client-side animations. The state of the Switch can be changed with mouse (click and/or drag), keyboard (focus with tab, use space to change the value) or by sliding the component via touch gestures in Mobile Safari and Android browser. Starting from version 1.0.0 the add-on has two additional built in styles ("compact" and "holodeck"). Navigate to the online demo to see them in action.
Online