MARKETPLACE
PLUGINS
TECHFORGE SEGMENTED CONTROL
TechForge Segmented Control logo

TechForge Segmented Control

Published June 2026
   •    Updated this week

Plugin details

TechForge Segmented Control is a clean, modern segmented control (a multi-option toggle / tab switcher) for selecting one option from a set. A drop-in replacement for clunky radio buttons and custom-built tab bars, with deep styling control and zero setup. Built for real apps: feed it a dynamic list from your database or a static set of options, read the selection anywhere via exposed states, and trigger workflows the moment a user makes a choice.
Features

Dynamic option list — drive labels from your own data or a static list
Optional Font Awesome icon per segment
Optional badge per segment (counts, "New", "Pro", etc.)
Two style presets: Solid and Outline
Animated sliding pill, with optional spring/bounce easing
Disable specific segments
Full-width or auto-width (segments hug their text) layouts
Fully styleable: selected/track/text colours, corner radius, font size, optional pill shadow and hover highlight
Exposed states: selected value (text) and selected index (number) — readable anywhere in your app
"A selection is made" event to trigger workflows
"Reset selection" action

Use cases
View switchers (Day / Week / Month), filter bars (All / Active / Archived), pricing tier selectors, tab navigation, settings toggles, form choice inputs.
Setup
Drag the element onto your page, set your options, style to taste. See the live demo to try every option interactively. Full documentation included.

$20

One time  •  Or  $4/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

TechForge logo
TechForge
Joined 2026   •   2 Plugins
View contributor profile

Instructions

Drag the SegmentedControl element onto your page. Set the Options field to a list of text (static, or dynamic from your data). Style it using the colour, corner radius, font size, and style preset fields, then resize the element to set its width and height.
To read the selection: insert "This SegmentedControl's selectedValue" (or selectedIndex) into any element. To react to changes: use the "A selection is made" event in a workflow. To reset: use the "Reset selection" action.

Optional: supply a matching list of Font Awesome class names in Icons, and short text in Badges, one per option. Disable segments by entering their 0-based indices (comma-separated) in Disabled segment indices.

Font Awesome is loaded automatically - no separate install required.

View the demo app's editor here: https://bubble.io/page?id=techforge-segmented-demo&test_plugin=1780995566420x286864701868736500_current&tab=Design&name=index

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Containers   •   Technical   •   Small Business   •   Productivity   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble