Most UI elements provided in Petal don't require additional JavaScript code to be functional (Checkboxes, Switches, etc) because they are implemented in pure CSS. However for some UI components, Petal provides just the styles for them and does not include working functions. For those, you will have to implement JavaScript by yourself.

These elements that do require additional JavaScript for full functionality have the Requires JavaScript label attached on section headers, so you'll know they won't work just by applying the HTML and CSS styles.

Among them, we offer a pre-built JavaScript file petal.js (and minified petal.min.js) that include functions for Toggle Buttons and Button Dropdowns. If you wish, you can use them right away just by embedding the script in your HTML:

<script src="path/to/petal.min.js"></script>

Selecter

Additionally we provide another JavaScript file in Petal package: jquery.fs.selecter.js. This is the file forked from the Selecter jQuery Plugin (by Ben Plum, MIT License). Petal's selectbox replacement styles is built around this plugin. If you want to use this, you'll need to include the jquery.fs.selecter.js file in your HTML as well as a compatible version of jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="path/to/jquery.fs.selecter.min.js"></script>