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.

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.

Default

Props