DemosSizesBootstrap toggle is available in different sizes. Show Custom SizesBootstrap toggle can handle custom sizes by ColorsBootstrap Toggle implements all standard bootstrap 4 button colors. Outline ColorsBootstrap Toggle implements all standard bootstrap 4 button outline colors. Dark Theme ColorsBootstrap Toggle colors look great on dark backgrounds. Dark Theme Outline ColorsBootstrap Toggle outline colors look great on dark backgrounds. Custom StyleStyle the buttons to fit an existing UX. Custom TextThe text can be changed easily with attributes or options. HTML, Icons, ImagesYou can easily add icons or images since html is supported for on/off text. Multiple Lines of TextToggles with multiple lines will adjust its heights. Animation SpeedTransition speed can be
easily controlled with css Stacked checkboxesSimply add Inline CheckboxesSimply add UsageInitialize with HTMLSimply add Initialize with JavaScriptSimply call the APIOptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option name to
MethodsMethods can be used to control toggles directly.
Checked StateYou can determine the checked state of a toggle using the `checked` property. Use the element property for checked state document.getElementById('toggle-state').checked Returns true/false EventsEvent PropagationNotes • All events are propagated to and from input element to the toggle.• Listen for events on the <input type="checkbox"> directly as the toggle stays synced with the input. Stopping Event Propagation Passing API vs InputThis also means that using the API or Input to trigger events will work both ways. |