Segmented Toggle Switch for Oracle APEX: One Plug-in, Any Number of Options
A List-of-Values-driven item plug-in that renders a segmented switch — two options, three, or five, all from the same component.
Hi everyone, welcome back to another Oracle APEX tutorial. Today I want to show you a small item plug-in I built after running into the same limitation on a few different projects: the native APEX switch is a great component, but it only ever gives you two fixed values.
Most of the time that's fine. But every so often you need a choice rather than a switch — three delivery tiers, three priority levels, or in the example I'll use throughout this post, a login duration with two options that could just as easily grow into three. So I built a Toggle Switch plug-in that is driven entirely by a List of Values and renders one segment per entry — the exact same plug-in covers a simple yes/no just as comfortably as a five-way choice.
How It Works
The plug-in is a single render procedure plus a small client-side script. Together they handle everything from reading your LOV to writing the selected value back into session state.
apex_plugin_util.get_data fetches the display/return pairs from your Static Values, SQL Query, or Shared LOV<span> segment is generated per LOV entry, with the matching one marked activechange event fires on selection, so the value submits normally and Dynamic Actions on Change work without extra wiringAttributes at a Glance
| Attribute | Type | Default |
|---|---|---|
| 1 Background Color | Text | #eef0f3 |
| 2 Toggle Color | Text | #3a6df0 |
| 3 Border Color | Text | rgba(0,0,0,0.08) |
| 4 Border Thickness | Number | 1 |
All four are optional — leave any of them empty and the default applies automatically, so the plug-in works out of the box with zero configuration.
Download the export file, item_type_plugin_sh_toggle_switch.sql, from the GitHub repository. In your target application, go to Shared Components → Plug-ins → Import, select the file, set File Type to Plug-in, click Next twice, then Install Plug-in. Once imported, Toggle switch appears in your plug-in list — the CSS and JavaScript install automatically, there's nothing to upload separately.
Right-click the region in the rendering tree and choose Create Page Item. Give it a name — for example P1_AUTO_LOGIN_YN — and under Identification → Type, select Toggle switch. All of the plug-in's custom attributes then appear right alongside the standard item settings.
This is the step that decides how many segments render. Under List of Values → Type, pick one of the three supported sources. The first column is the label shown inside the segment; the second is the return value written to session state.
STATIC:One-Time Login;NO,Remember 1 Year;YESSELECT 'One-Time Login' AS d, 'NO' AS r FROM dual
UNION ALL
SELECT 'Remember 1 Year' AS d, 'YES' AS r FROM dualAlready maintaining the values as a shared List of Values? Select it here instead — that's exactly what the screenshot in Step 2 shows.
All four appearance attributes are optional. Leave any of them empty and a sensible default is applied automatically. Color fields accept hex, RGB, RGBA, or named colors, with a native color picker next to each one.
| Attribute | Example | Effect |
|---|---|---|
| Background Color | #cfb9b9 | The track behind the segments |
| Toggle Color | #d37c93 | The sliding knob marking the selection |
| Border Color | #050404 | Outline around the track |
| Border Thickness | 2 | Border width in pixels, clamped 0–99 |
Sizing follows the standard APEX item width setting — there is no custom width attribute. Height scales with the larger widths too, because a wide but thin segmented switch looks visually unbalanced; Stretch is the exception, since it grows only in width.
| APEX Setting | Width | Height |
|---|---|---|
| Default | 200px | 34px |
| Large | 300px | 42px |
| X-Large | 400px | 50px |
| Stretch | Fills the container | 34px |
A switch should always show a selection. Under Default → Type, choose Static and enter one of your return values, for example YES.
Seeing It on a Real Page
Here's the same toggle used as an auto-login duration selector on a login page. Clicking a segment slides the knob and fires a native change event, so any Dynamic Action bound to the item's Change event works without extra wiring.
The labels support emoji, which is a cheap way to add meaning to a segment without pulling in an icon font — the 🔒 and 🛡️ prefixes above are plain text in the LOV.
Troubleshooting
shToggleSwitch is not defined and re-import, confirming the export still includes the file under Filestoggle_switch.css to confirm it's fetchedYes vs. YES. Return values compare exactlyFinal Thoughts
The Toggle Switch plug-in is a small piece, but it closes a real gap in Oracle APEX's native item set: a switch that isn't limited to two values. Because it's entirely LOV-driven, the same plug-in serves a plain yes/no today and a five-way choice tomorrow, with nothing more than an LOV change in between. Import it once, wire up a List of Values, and from there it behaves exactly like any other page item — session state, Dynamic Actions, and all.
It ships under the MIT license, has zero external dependencies, and the full source — PL/SQL, CSS, and JavaScript — is kept readable in the GitHub repository alongside the packaged plug-in export. Grab it, star it if it's useful, and open an issue if you hit a bug. Happy coding! 🚀
{fullWidth}