Radio Dropdown

Overview

Radio Dropdown is a compact control for picking a single option from a list — typically a filter such as a status or category. It renders as a Button showing the current selection, opening a Dropdown Menu of radio options. Each option can carry an optional count, shown as a Badge on the trigger and inline in the menu, which is handy for surfacing how many items match each filter.

It is a controlled component: you provide the options and the selectedValue, and it calls onSelect when the user chooses a different one. Options with an empty value or label are filtered out automatically. For longer lists, searchable adds in-menu search.

Usage

Import the component:

import { RadioDropdown } from "@eqtylab/equality";

Hold the selected value in state and update it from onSelect:

const [status, setStatus] = useState("active");

<RadioDropdown
  label="Status"
  options={[
    { value: "active", label: "Active", count: 5 },
    { value: "archived", label: "Archived", count: 2 },
  ]}
  selectedValue={status}
  onSelect={setStatus}
/>;

The label is shown on the trigger before anything is selected, and as the heading inside the menu. Once an option is selected, its label replaces the trigger text. With searchable, the search box replaces the heading and takes label as its accessible name.

Default

Search

Pass searchable to add the Dropdown Menu ’s in-place search. It is off by default. Reach for it once the list is long enough.

The search box sits at the top of the menu and is focused as soon as it opens. Options that don’t match hide themselves, matching against each option’s label. chooses the first match.

Use searchPlaceholder to describe what is being searched, and emptyPlaceholder for the message shown when a query matches nothing. Both are ignored unless searchable is set:

<RadioDropdown
  label="Status"
  options={statuses}
  selectedValue={status}
  onSelect={setStatus}
  searchable
  searchPlaceholder="Search categories..."
  emptyPlaceholder="No categories match"
/>

The empty message only appears while a query is active — an empty options array renders an empty menu rather than this message.

Props