Custom RadioGroup Component for Retool with Conditional Display

Retool's native RadioGroup component works fine for a quick yes/no toggle, but the moment you need grouped options, conditional visibility, icons, or delivery-estimate-style descriptions, it falls apart fast. If you've been duct-taping together multiple Select components with visibility rules just to replicate what should be a single input, there's a better way. This open-source custom RadioGroup component for Retool covers everything the native widget can't — and it drops into your app in minutes.

What's Wrong with Retool's Native Radio Group?

The built-in RadioGroup is intentionally minimal. That's fine for prototypes, but real internal tools demand more:

• No support for option groups with section headers
• No way to show or hide individual options based on app state
• No icons, badges, or descriptions per option
• Layout is limited to a single axis — no grid or justified modes
• No multi-select (checkbox-style) behavior in one component

The workaround most teams reach for is a mess of Select dropdowns, hidden Container blocks, and brittle {{state}} conditionals scattered across the canvas. It works until it doesn't.

What the Custom RadioGroup Component Adds

The open-source component, built by Stackdrop, is a Retool Custom Component Library (CCL) module that replaces and far exceeds the native widget. Here's what it supports out of the box:

• Single & multiple selection modes — radio or checkbox behavior from one component
• Conditional display with JavaScript expressions — show or hide individual options based on any {{appState}}, query result, or variable
• Four layout modes: vertical, horizontal, grid, justified
• Rich content per option: icons, badges, HTML descriptions, truncation-aware tooltips
• Option groups with labeled section headers
• Flexible button positioning: left, right, top, or bottom of the label
• Multiple button shapes: circle, square, rounded, diamond
• Full keyboard accessibility baked in
• Custom styling for colors, typography, and spacing — no CSS hacks needed

How to Install the Custom RadioGroup in Your Retool App

Setup follows the standard Retool CCL deployment flow. You'll need Node.js installed and access to your Retool organization's custom component settings.

1. Clone the repository
   git clone https://github.com/StackdropCO/custom-radio-group-retool-component
2. Install dependencies
   cd custom-radio-group-retool-component && npm install
3. Deploy to your Retool org
   npx retool-ccl deploy
   You'll be prompted to authenticate with your Retool instance and select the target organization.
4. Drag it into your app
   After deployment, the component appears in the Custom Components section of Retool's left panel. Drag it onto the canvas like any native widget.
5. Configure your options
   Pass a JSON array to the options prop. Each option supports label, value, icon, badge, description, group, and a visible expression field that evaluates JavaScript at runtime.

Real-World Example: Shipping Method Selector

Here's the use case that drove this build. Imagine a shipping method selector in an order management tool. Requirements:

• Options grouped by carrier (FedEx, UPS, USPS)
• Domestic-only options hidden when {{order.destination}} is international
• Options filtered by order value — overnight only shown when {{order.total}} > 500
• Badges like "Recommended" or "Fastest" on specific options
• Delivery estimate rendered as a description under each label

With the native RadioGroup, you'd need four or five separate components, a transformer, and at least three visibility rules. With this custom component, it's one component and a well-structured options array. The visible field on each option accepts any JavaScript expression, so {{order.isInternational === false}} just works inline.

How Conditional Display Works Under the Hood

Each option in the config accepts a visible key. At render time, the component evaluates that expression in the context of your Retool app state. This means you can reference:

• Component values: {{select1.value}}
• Query data: {{getOrder.data.isInternational}}
• Global variables: {{currentUser.groups.includes('admin')}}

No additional transformers or hidden containers needed. The logic lives with the data where it belongs.

Where to Find It and How to Contribute

The component is fully open source under the MIT license.

• Component repo: github.com/StackdropCO/custom-radio-group-retool-component
• Community component list: github.com/StackdropCO/awesome-retool-components

If you've built a Retool custom component yourself, the awesome-retool-components repo is a growing index of community-built widgets worth contributing to. PRs are open.

Is This Better Than Building Your Own?

If your use case is genuinely simple, the native RadioGroup is still the right call — fewer moving parts. But if you've already opened the "add another Select and hide it conditionally" playbook more than once for the same screen, the setup cost of a CCL component pays off immediately. The deploy takes under five minutes, and the options schema is straightforward JSON you can drive from a query or transformer.

This is the kind of component that should exist in every Retool team's shared library. Star the repo, try it in your next build, and open an issue if you hit an edge case worth solving.