MARKETPLACE
PLUGINS
CARD AND SEGMENTED SELECTION BOX
Card and Segmented Selection Box logo

Card and Segmented Selection Box

Published June 2026
   •    Updated June 2026

Plugin details

Native Cards and Segmented Selection Group is a mobile-native selection plugin bundle for Bubble apps that includes two polished single-choice selection components: selectable option cards and segmented controls. It is designed for iOS and Android mobile apps where users need to choose one option from a clear, customizable set of choices.
The card selector is best for rich choices that need more visual detail, while the segmented control is best for compact filters, tabs, and quick mode switching. Both components publish selected values and labels, support disabled states, and can be styled to match your app’s brand.

Included Components

    []Native Option Cards Pro: A card-based selector for rich options with labels, subtitles, icons, borders, active states, and disabled states. []Native Segmented Control Pro: A compact button-style selector for switching between options, filters, views, or modes.

Main Use Cases

    []Pricing plan selection []Subscription package selection []Delivery or pickup method selection []Shipping option selection []Booking type selection []Service package selection []Account type selection []Payment type selection []View switching such as List/Grid/Map []Filter switching such as All/Active/Completed []Time range switching such as Day/Week/Month []Status filters for dashboards, CRM, marketplace, and booking apps

Key Features

    []Mobile-native selection controls for Bubble apps []Works on iOS and Android []Single-choice selection behavior []Custom option labels and values []Optional subtitles for richer descriptions []Optional icon text for visual emphasis []Disabled option support []Required validation support []Read-only mode []Allow deselect option []Custom active, inactive, disabled, border, background, and text colors []Custom spacing, padding, border radius, item height, and item width []Vertical, horizontal, and wrap layout support where applicable []Published selected value and selected label states []Workflow actions for setting, toggling, clearing, and validating selections []Clean card UI and compact segmented UI for professional mobile interfaces

Option Cards

Use Native Option Cards Pro when each option needs more information than a simple button or radio item. Each card can display a label, subtitle, optional icon text, selected border, selected background, and selected indicator. This is ideal when users need to compare options before choosing.

Best For Option Cards

    []Basic, Pro, and Enterprise plan selection []Standard, Express, and Pickup delivery choices []Service packages []Booking categories []Account type selection []Payment or billing choices
  • Feature-rich mobile forms

Segmented Control

Use Native Segmented Control Pro when users need to switch quickly between compact choices. It works well for filters, tabs, status views, and quick mode selection. The selected segment is visually highlighted, making it clear which option is active.

Best For Segmented Control

    []All / Active / Completed []Day / Week / Month []List / Grid / Map []Personal / Business []Open / Closed / Pending []Upcoming / Past
  • Light / Dark / System

$3

One time

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

Platform

Native mobile

Contributor details

CoDara logo
CoDara
Joined 2025   •   15 Plugins
View contributor profile

Instructions

    []Install the plugin in your Bubble mobile app. []Open the mobile page where you want to add the selector. []Add either Native Option Cards Pro or Native Segmented Control Pro to the page. []Enter your visible options in Option labels, with each option on a new line. []Enter the saved values in Option values, with each value on a new line. []If using cards, add supporting descriptions in Option subtitles. []If needed, add short icon text in Option icons. []Set Selected value to choose the default selected option. []Use Disabled values to prevent specific options from being selected. []Customize the colors, spacing, borders, radius, padding, item size, and selected states.
  1. Use the published selected value in workflows, conditions, database saves, or filtering logic.
Option Labels And Values

    []Option labels are the text users see on the screen. []Option values are the values Bubble saves and publishes. []Each label and value should be placed on a new line. []The first label matches the first value, the second label matches the second value, and so on.
  • If option values are empty, the plugin can safely use labels as values.

Example

Option labels:

Basic
Pro
Enterprise

Option values:

basic
pro
enterprise

If the user selects Pro, the plugin publishes pro as the selected value.

Published States

    []selected_value: The currently selected option value. []selected_label: The readable label of the selected option. []selected_values: The selected value as list-style text. []selected_labels: The selected label as list-style text. []active_values: The currently active/selected value. []active_labels: The currently active/selected label. []inactive_values: Values that are not selected. []inactive_labels: Labels that are not selected. []disabled_values: Values that are disabled. []disabled_labels: Labels that are disabled. []enabled_values: Values that are currently selectable. []enabled_labels: Labels that are currently selectable. []selected_count: Number of selected options. []is_valid: Whether the current selection passes validation. []last_changed_value: Most recent option value changed by the user. []last_changed_label: Most recent option label changed by the user.
  • last_error_message: Validation or error message, if any.

Workflow Events

    []selection changed: Runs when the selected option changes. []option selected: Runs when an option is selected. []option deselected: Runs when an option is deselected, if deselect is allowed. []disabled option pressed: Runs when a disabled option is tapped.
  • validation failed: Runs when required validation fails.

Workflow Actions

    []Set selected value: Programmatically select an option. []Toggle value: Toggle a specific option depending on the current settings. []Clear selection: Remove the selected option. []Validate: Check whether the current selection is valid.

Instructions For Workflows

    []Use selected_value when saving the user’s selected option to the database. []Use selected_label when displaying the readable selected option somewhere else on the page. []Use selection changed to run workflows immediately after the user changes their selection. []Use is_valid before allowing users to continue to the next step. []Use validation failed to show an error message when a required selection is missing. []Use Set selected value when another workflow should control the selected option.
  1. Use Clear selection when resetting filters, forms, or choices.

Important Notes

    []This plugin is built for Bubble mobile/native apps. []Test on a real iOS or Android device for the most accurate behavior. []Both components are single-choice selectors. []Use Option Cards when choices need more visual detail. []Use Segmented Control when choices should be compact and quick to switch. []For multiple selections, use the Checkbox Group plugin instead.

Live Editor Page
https://bubble.io/page?id=codara&test_plugin=1781666356998x748689716873265200_current&tab=Design&name=Cards+and+sermented&type=page&elements=bTIBU

Demo Page
https://codara.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Cards%20and%20sermented

Types

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

Categories

This plugin can be found under the following categories:
Data (things)   •   Technical   •   Productivity   •   Containers   •   Chat   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales