From 84380072502562088497e8353598e9217f519e6b Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 26 Sep 2025 12:31:47 -0600
Subject: [PATCH 1/6] refactor checklist portion of dropdown into its own
 optionlist; implement checklist component

---
 .../src/components/Checklist.react.js         | 230 ------------------
 .../src/components/Checklist.tsx              |  63 +++++
 .../src/components/css/checklist.css          |   4 +
 .../src/components/css/dropdown.css           |  35 ---
 .../src/components/css/optionslist.css        |  42 ++++
 .../src/fragments/Dropdown.tsx                |  80 ++++--
 components/dash-core-components/src/index.ts  |   2 +-
 components/dash-core-components/src/types.ts  |  89 ++++++-
 .../src/utils/optionRendering.tsx             | 151 ++++++++++++
 9 files changed, 402 insertions(+), 294 deletions(-)
 delete mode 100644 components/dash-core-components/src/components/Checklist.react.js
 create mode 100644 components/dash-core-components/src/components/Checklist.tsx
 create mode 100644 components/dash-core-components/src/components/css/checklist.css
 create mode 100644 components/dash-core-components/src/components/css/optionslist.css
 create mode 100644 components/dash-core-components/src/utils/optionRendering.tsx

diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
deleted file mode 100644
index eb0c6c344b..0000000000
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import PropTypes from 'prop-types';
-import {append, includes, without} from 'ramda';
-import React, {Component} from 'react';
-
-import {sanitizeOptions} from '../utils/optionTypes';
-import LoadingElement from '../utils/LoadingElement';
-
-/**
- * Checklist is a component that encapsulates several checkboxes.
- * The values and labels of the checklist are specified in the `options`
- * property and the checked items are specified with the `value` property.
- * Each checkbox is rendered as an input with a surrounding label.
- */
-export default class Checklist extends Component {
-    render() {
-        const {
-            className,
-            id,
-            inputClassName,
-            inputStyle,
-            labelClassName,
-            labelStyle,
-            options,
-            setProps,
-            style,
-            value,
-            inline,
-        } = this.props;
-        return (
-            <LoadingElement id={id} style={style} className={className}>
-                {sanitizeOptions(options).map(option => {
-                    return (
-                        <label
-                            key={option.value}
-                            style={{
-                                display: inline ? 'inline-block' : 'block',
-                                ...labelStyle,
-                            }}
-                            className={labelClassName}
-                            title={option.title}
-                        >
-                            <input
-                                checked={includes(option.value, value)}
-                                className={inputClassName}
-                                disabled={Boolean(option.disabled)}
-                                style={inputStyle}
-                                type="checkbox"
-                                onChange={() => {
-                                    let newValue;
-                                    if (includes(option.value, value)) {
-                                        newValue = without(
-                                            [option.value],
-                                            value
-                                        );
-                                    } else {
-                                        newValue = append(option.value, value);
-                                    }
-                                    setProps({value: newValue});
-                                }}
-                            />
-                            {option.label}
-                        </label>
-                    );
-                })}
-            </LoadingElement>
-        );
-    }
-}
-
-Checklist.propTypes = {
-    /**
-     * An array of options
-     */
-    options: PropTypes.oneOfType([
-        /**
-         * Array of options where the label and the value are the same thing - [string|number|bool]
-         */
-        PropTypes.arrayOf(
-            PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.number,
-                PropTypes.bool,
-            ])
-        ),
-        /**
-         * Simpler `options` representation in dictionary format. The order is not guaranteed.
-         * {`value1`: `label1`, `value2`: `label2`, ... }
-         * which is equal to
-         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
-         */
-        PropTypes.object,
-        /**
-         * An array of options {label: [string|number], value: [string|number]},
-         * an optional disabled field can be used for each option
-         */
-        PropTypes.arrayOf(
-            PropTypes.exact({
-                /**
-                 * The option's label
-                 */
-                label: PropTypes.node.isRequired,
-
-                /**
-                 * The value of the option. This value
-                 * corresponds to the items specified in the
-                 * `value` property.
-                 */
-                value: PropTypes.oneOfType([
-                    PropTypes.string,
-                    PropTypes.number,
-                    PropTypes.bool,
-                ]).isRequired,
-
-                /**
-                 * If true, this option is disabled and cannot be selected.
-                 */
-                disabled: PropTypes.bool,
-
-                /**
-                 * The HTML 'title' attribute for the option. Allows for
-                 * information on hover. For more information on this attribute,
-                 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
-                 */
-                title: PropTypes.string,
-            })
-        ),
-    ]),
-
-    /**
-     * The currently selected value
-     */
-    value: PropTypes.arrayOf(
-        PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-            PropTypes.bool,
-        ])
-    ),
-
-    /**
-     * Indicates whether the options labels should be displayed inline (true=horizontal)
-     * or in a block (false=vertical).
-     */
-    inline: PropTypes.bool,
-
-    /**
-     * The class of the container (div)
-     */
-    className: PropTypes.string,
-
-    /**
-     * The style of the container (div)
-     */
-    style: PropTypes.object,
-
-    /**
-     * The style of the <input> checkbox element
-     */
-    inputStyle: PropTypes.object,
-
-    /**
-     * The class of the <input> checkbox element
-     */
-    inputClassName: PropTypes.string,
-
-    /**
-     * The style of the <label> that wraps the checkbox input
-     *  and the option's label
-     */
-    labelStyle: PropTypes.object,
-
-    /**
-     * The class of the <label> that wraps the checkbox input
-     *  and the option's label
-     */
-    labelClassName: PropTypes.string,
-
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
-    /**
-     * Dash-assigned callback that gets fired when the value changes.
-     */
-    setProps: PropTypes.func,
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.string,
-        PropTypes.number,
-    ]),
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
-};
-
-Checklist.defaultProps = {
-    inputStyle: {},
-    inputClassName: '',
-    labelStyle: {},
-    labelClassName: '',
-    options: [],
-    value: [],
-    persisted_props: ['value'],
-    persistence_type: 'local',
-    inline: false,
-};
diff --git a/components/dash-core-components/src/components/Checklist.tsx b/components/dash-core-components/src/components/Checklist.tsx
new file mode 100644
index 0000000000..e0b1634e67
--- /dev/null
+++ b/components/dash-core-components/src/components/Checklist.tsx
@@ -0,0 +1,63 @@
+import React, {useMemo} from 'react';
+import {append, includes, without} from 'ramda';
+import {ChecklistProps, PersistedProps, PersistenceTypes} from '../types';
+import './css/checklist.css';
+
+import {sanitizeOptions} from '../utils/optionTypes';
+import LoadingElement from '../utils/_LoadingElement';
+import {Option, OptionsList} from '../utils/optionRendering';
+
+/**
+ * Checklist is a component that encapsulates several checkboxes.
+ * The values and labels of the checklist are specified in the `options`
+ * property and the checked items are specified with the `value` property.
+ * Each checkbox is rendered as an input with a surrounding label.
+ */
+export default function Checklist({
+    className,
+    id,
+    style,
+    setProps,
+    inputStyle = {},
+    inputClassName = '',
+    labelStyle = {},
+    labelClassName = '',
+    options = [],
+    value = [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.value],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    inline = false,
+}: ChecklistProps) {
+    const sanitizedOptions = useMemo(() => {
+        return sanitizeOptions(options);
+    }, [options]);
+
+    const stylingProps = {
+        id,
+        className: 'dash-checklist ' + (className ?? ''),
+        style,
+        optionClassName: inline ? 'dash-checklist-inline' : undefined,
+        inputStyle,
+        inputClassName,
+        labelStyle,
+        labelClassName,
+    };
+
+    return (
+        <LoadingElement>
+            {loadingProps => (
+                <OptionsList
+                    {...loadingProps}
+                    options={sanitizedOptions}
+                    selected={value ?? []}
+                    onSelectionChange={selection => {
+                        setProps({value: selection});
+                    }}
+                    {...stylingProps}
+                />
+            )}
+        </LoadingElement>
+    );
+}
diff --git a/components/dash-core-components/src/components/css/checklist.css b/components/dash-core-components/src/components/css/checklist.css
new file mode 100644
index 0000000000..0646d87af4
--- /dev/null
+++ b/components/dash-core-components/src/components/css/checklist.css
@@ -0,0 +1,4 @@
+.dash-options-list-option.dash-checklist-inline {
+    display: inline-block;
+    margin-right: calc(var(--Dash-Spacing) * 4);
+}
diff --git a/components/dash-core-components/src/components/css/dropdown.css b/components/dash-core-components/src/components/css/dropdown.css
index 9e1f4b2705..5788c3d31c 100644
--- a/components/dash-core-components/src/components/css/dropdown.css
+++ b/components/dash-core-components/src/components/css/dropdown.css
@@ -191,40 +191,5 @@
 
 .dash-dropdown-option {
     padding: var(--Dash-Spacing) calc(var(--Dash-Spacing) * 3);
-    background: var(--Dash-Fill-Inverse-strong);
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
-    color: var(--Dash-Text-Strong);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    overflow: hidden;
-}
-
-.dash-dropdown-option:not(:has(input[disabled])):hover,
-.dash-dropdown-option:not(:has(input[disabled])):focus-within {
-    color: var(--Dash-Fill-Interactive-Strong);
-    background: var(--Dash-Fill-Interactive-Weak);
-}
-
-.dash-dropdown-option:has(input[disabled]) {
-    color: var(--Dash-Text-Disabled);
-    cursor: not-allowed;
-}
-
-.dash-dropdown-option-text {
-    white-space: pre;
-}
-
-.dash-dropdown-option-checkbox {
-    display: inline-block;
-    margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;
-    box-sizing: border-box;
-    border: 1px solid var(--Dash-Stroke-Strong);
-}
-
-.dash-dropdown-option-checkbox:hover,
-.dash-dropdown-option-checkbox:focus,
-.dash-dropdown-option-checkbox:checked {
-    accent-color: var(--Dash-Fill-Interactive-Strong);
 }
diff --git a/components/dash-core-components/src/components/css/optionslist.css b/components/dash-core-components/src/components/css/optionslist.css
new file mode 100644
index 0000000000..10f0e7404a
--- /dev/null
+++ b/components/dash-core-components/src/components/css/optionslist.css
@@ -0,0 +1,42 @@
+.dash-options-list-option {
+    padding: var(--Dash-Spacing) 0;
+    background: var(--Dash-Fill-Inverse-strong);
+    color: var(--Dash-Text-Strong);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    overflow: hidden;
+}
+
+.dash-options-list-option:not(:has(input[disabled])):hover,
+.dash-options-list-option:not(:has(input[disabled])):focus-within {
+    color: var(--Dash-Fill-Interactive-Strong);
+    background: var(--Dash-Fill-Interactive-Weak);
+}
+
+.dash-options-list-option:has(input[disabled]) {
+    color: var(--Dash-Text-Disabled);
+    cursor: not-allowed;
+}
+
+.dash-options-list-option-text {
+    white-space: pre;
+}
+
+.dash-options-list-option-text > * {
+    vertical-align: middle;
+}
+
+.dash-options-list-option-checkbox {
+    display: inline-block;
+    margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;
+    box-sizing: border-box;
+    border: 1px solid var(--Dash-Stroke-Strong);
+}
+
+.dash-options-list-option-checkbox:hover,
+.dash-options-list-option-checkbox:focus,
+.dash-options-list-option-checkbox:checked {
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+}
diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
index ec4d001b6c..29b9af7e76 100644
--- a/components/dash-core-components/src/fragments/Dropdown.tsx
+++ b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -18,6 +18,7 @@ import '../components/css/dropdown.css';
 
 import isEqual from 'react-fast-compare';
 import {DetailedDropdownOption, DropdownProps, DropdownValue} from '../types';
+import {OptionsList} from '../utils/optionRendering';
 
 interface DropdownOptionProps {
     index: number;
@@ -183,6 +184,43 @@ const Dropdown = (props: DropdownProps) => {
         [multi, clearable, closeOnSelect, sanitizedValues]
     );
 
+    const updateSelection = useCallback(
+        (selection: DropdownValue[]) => {
+            if (closeOnSelect !== false) {
+                setIsOpen(false);
+            }
+
+            if (multi) {
+                // For multi-select, validate the selection respects clearable rules
+                if (selection.length === 0) {
+                    // Empty selection: only allow if clearable is true
+                    if (clearable) {
+                        setProps({value: []});
+                    }
+                    // If clearable is false and trying to set empty, do nothing
+                    // return;
+                } else {
+                    // Non-empty selection: always allowed in multi-select
+                    setProps({value: selection});
+                }
+            } else {
+                // For single-select, take the first value or null
+                if (selection.length === 0) {
+                    // Empty selection: only allow if clearable is true
+                    if (clearable) {
+                        setProps({value: null});
+                    }
+                    // If clearable is false and trying to set empty, do nothing
+                    // return;
+                } else {
+                    // Take the first value for single-select
+                    setProps({value: selection[selection.length - 1]});
+                }
+            }
+        },
+        [multi, clearable, closeOnSelect]
+    );
+
     const onInputChange = useCallback(
         search_value => setProps({search_value}),
         []
@@ -537,34 +575,22 @@ const Dropdown = (props: DropdownProps) => {
                                 )}
                             </div>
                         )}
-                        {isOpen && (
+                        {isOpen && !!displayOptions.length && (
+                            <>
+                                <OptionsList
+                                    options={displayOptions}
+                                    selected={sanitizedValues}
+                                    onSelectionChange={updateSelection}
+                                    className="dash-dropdown-options"
+                                    optionClassName="dash-dropdown-option"
+                                />
+                            </>
+                        )}
+                        {isOpen && search_value && !displayOptions.length && (
                             <div className="dash-dropdown-options">
-                                {displayOptions.map((option, i) => {
-                                    const isSelected = multi
-                                        ? sanitizedValues.includes(option.value)
-                                        : value === option.value;
-
-                                    return (
-                                        <DropdownOption
-                                            key={`${option.value}-${i}`}
-                                            index={i}
-                                            option={option}
-                                            isSelected={isSelected}
-                                            onClick={handleOptionClick}
-                                            style={{
-                                                height: optionHeight
-                                                    ? `${optionHeight}px`
-                                                    : undefined,
-                                            }}
-                                        />
-                                    );
-                                })}
-                                {search_value &&
-                                    displayOptions.length === 0 && (
-                                        <span className="dash-dropdown-option">
-                                            No options found
-                                        </span>
-                                    )}
+                                <span className="dash-dropdown-option">
+                                    No options found
+                                </span>
                             </div>
                         )}
                     </Popover.Content>
diff --git a/components/dash-core-components/src/index.ts b/components/dash-core-components/src/index.ts
index 6eed43faa0..b93f8b9c68 100644
--- a/components/dash-core-components/src/index.ts
+++ b/components/dash-core-components/src/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import Checklist from './components/Checklist.react';
+import Checklist from './components/Checklist';
 import Clipboard from './components/Clipboard.react';
 import ConfirmDialog from './components/ConfirmDialog.react';
 import ConfirmDialogProvider from './components/ConfirmDialogProvider.react';
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
index 7e51d4b68f..7421f6a759 100644
--- a/components/dash-core-components/src/types.ts
+++ b/components/dash-core-components/src/types.ts
@@ -347,7 +347,7 @@ export interface RangeSliderProps {
 export type DropdownValue = string | number | boolean;
 
 export type DetailedDropdownOption = {
-    label: string | DashComponent;
+    label: string | DashComponent | DashComponent[];
     /**
      * The value of the option. This value
      * corresponds to the items specified in the
@@ -497,3 +497,90 @@ export interface DropdownProps {
      */
     persistence_type?: PersistenceTypes;
 }
+
+export interface ChecklistProps {
+    /**
+     * An array of options
+     */
+    options?: DropdownOptionsArray | DropdownOptionsDict;
+
+    /**
+     * The currently selected value
+     */
+    value?: DropdownValue[] | null;
+
+    /**
+     * Indicates whether the options labels should be displayed inline (true=horizontal)
+     * or in a block (false=vertical).
+     */
+    inline?: boolean;
+
+    /**
+     * The class of the container (div)
+     */
+    className?: string;
+
+    /**
+     * The style of the container (div)
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * The style of the <input> checkbox element
+     */
+    inputStyle?: React.CSSProperties;
+
+    /**
+     * The class of the <input> checkbox element
+     */
+    inputClassName?: string;
+
+    /**
+     * The style of the <label> that wraps the checkbox input
+     *  and the option's label
+     */
+    labelStyle?: React.CSSProperties;
+
+    /**
+     * The class of the <label> that wraps the checkbox input
+     *  and the option's label
+     */
+    labelClassName?: string;
+
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id?: string;
+
+    /**
+     * Dash-assigned callback that gets fired when the value changes.
+     */
+    setProps: (props: Partial<ChecklistProps>) => void;
+
+    /**
+     * Used to allow user interactions in this component to be persisted when
+     * the component - or the page - is refreshed. If `persisted` is truthy and
+     * hasn't changed from its previous value, a `value` that the user has
+     * changed while using the app will keep that change, as long as
+     * the new `value` also matches what was given originally.
+     * Used in conjunction with `persistence_type`.
+     */
+    persistence?: boolean | string | number;
+
+    /**
+     * Properties whose user interactions will persist after refreshing the
+     * component or the page. Since only `value` is allowed this prop can
+     * normally be ignored.
+     */
+    persisted_props?: PersistedProps[];
+
+    /**
+     * Where persisted user changes will be stored:
+     * memory: only kept in memory, reset on page refresh.
+     * local: window.localStorage, data is kept after the browser quit.
+     * session: window.sessionStorage, data is cleared once the browser quit.
+     */
+    persistence_type?: PersistenceTypes;
+}
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
new file mode 100644
index 0000000000..d27517c89f
--- /dev/null
+++ b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import {append, includes, without} from 'ramda';
+import {DetailedDropdownOption, DropdownValue} from 'src/types';
+import '../components/css/optionslist.css';
+
+interface StylingProps {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    optionClassName?: string;
+    optionStyle?: React.CSSProperties;
+    inputType?: 'checkbox' | 'radio';
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+}
+
+interface OptionProps extends StylingProps {
+    index: number;
+    option: DetailedDropdownOption;
+    isSelected: boolean;
+    onChange: (option: DetailedDropdownOption) => void;
+}
+
+function OptionLabel(
+    props: DetailedDropdownOption & {index: string | number}
+): JSX.Element {
+    const ctx = window.dash_component_api.useDashContext();
+    const ExternalWrapper = window.dash_component_api.ExternalWrapper;
+
+    if (typeof props.label === 'object') {
+        const labels =
+            props.label instanceof Array ? props.label : [props.label];
+        return (
+            <>
+                {labels.map((label, i) => (
+                    <ExternalWrapper
+                        key={i}
+                        component={label}
+                        componentPath={[...ctx.componentPath, props.index, i]}
+                    />
+                ))}
+            </>
+        );
+    }
+
+    const displayLabel = `${props.label ?? props.value}`;
+    return <span title={props.title}>{displayLabel}</span>;
+}
+
+export const Option: React.FC<OptionProps> = ({
+    option,
+    isSelected,
+    onChange,
+    optionClassName,
+    optionStyle,
+    inputType = 'checkbox',
+    inputClassName,
+    inputStyle,
+    labelClassName,
+    labelStyle,
+    index,
+}) => {
+    const classNames = [
+        'dash-options-list-option',
+        isSelected ? 'selected' : '',
+        optionClassName,
+    ].filter(Boolean);
+
+    const inputClassNames = [
+        'dash-options-list-option-checkbox',
+        inputClassName,
+    ].filter(Boolean);
+
+    const labelClassNames = [
+        'dash-options-list-option-text',
+        labelClassName,
+    ].filter(Boolean);
+
+    return (
+        <label
+            className={classNames.join(' ')}
+            role="option"
+            aria-selected={isSelected}
+            style={optionStyle}
+            title={option.title}
+        >
+            <input
+                type={inputType}
+                checked={isSelected}
+                value={
+                    typeof option.value === 'boolean'
+                        ? `${option.value}`
+                        : option.value
+                }
+                disabled={!!option.disabled}
+                onChange={() => onChange(option)}
+                readOnly
+                className={inputClassNames.join(' ')}
+                style={inputStyle}
+            />
+            <span className={labelClassNames.join(' ')} style={labelStyle}>
+                <OptionLabel {...option} index={index} />
+            </span>
+        </label>
+    );
+};
+
+interface OptionsListProps extends StylingProps {
+    options: DetailedDropdownOption[];
+    selected: DropdownValue[];
+    onSelectionChange: (selected: DropdownValue[]) => void;
+}
+
+export const OptionsList: React.FC<OptionsListProps> = ({
+    options,
+    selected,
+    onSelectionChange,
+    id,
+    className,
+    style,
+    ...passThruProps
+}) => {
+    const classNames = ['dash-options-list', className].filter(Boolean);
+    return (
+        <div id={id} className={classNames.join(' ')} style={style}>
+            {options.map((option, i) => {
+                const isSelected = includes(option.value, selected);
+                return (
+                    <Option
+                        key={i}
+                        index={i}
+                        option={option}
+                        isSelected={isSelected}
+                        onChange={option => {
+                            let newValue: DropdownValue[];
+                            if (includes(option.value, selected)) {
+                                newValue = without([option.value], selected);
+                            } else {
+                                newValue = append(option.value, selected);
+                            }
+                            onSelectionChange(newValue);
+                        }}
+                        {...passThruProps}
+                    />
+                );
+            })}
+        </div>
+    );
+};

From c5be31f482b929eec1fc73fcb33e213cfd732474 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 26 Sep 2025 12:50:49 -0600
Subject: [PATCH 2/6] Remove duplicated code and give some types more generic
 names

---
 .../src/fragments/Dropdown.tsx                | 144 ++----------------
 components/dash-core-components/src/types.ts  |  18 +--
 .../src/utils/dropdownSearch.ts               |   8 +-
 .../src/utils/optionRendering.tsx             |  18 +--
 .../src/utils/optionTypes.ts                  |   6 +-
 5 files changed, 39 insertions(+), 155 deletions(-)

diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
index 29b9af7e76..7464d11d75 100644
--- a/components/dash-core-components/src/fragments/Dropdown.tsx
+++ b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -17,69 +17,8 @@ import * as Popover from '@radix-ui/react-popover';
 import '../components/css/dropdown.css';
 
 import isEqual from 'react-fast-compare';
-import {DetailedDropdownOption, DropdownProps, DropdownValue} from '../types';
-import {OptionsList} from '../utils/optionRendering';
-
-interface DropdownOptionProps {
-    index: number;
-    option: DetailedDropdownOption;
-    isSelected: boolean;
-    onClick: (option: DetailedDropdownOption) => void;
-    style?: React.CSSProperties;
-}
-
-function DropdownLabel(
-    props: DetailedDropdownOption & {index: string | number}
-): JSX.Element {
-    const ctx = window.dash_component_api.useDashContext();
-    const ExternalWrapper = window.dash_component_api.ExternalWrapper;
-
-    if (typeof props.label === 'object') {
-        return (
-            <ExternalWrapper
-                component={props.label}
-                componentPath={[...ctx.componentPath, props.index]}
-            />
-        );
-    }
-    const displayLabel = `${props.label ?? props.value}`;
-    return <span title={props.title}>{displayLabel}</span>;
-}
-
-const DropdownOption: React.FC<DropdownOptionProps> = ({
-    option,
-    isSelected,
-    onClick,
-    style,
-    index,
-}) => {
-    return (
-        <label
-            className={`dash-dropdown-option ${isSelected ? 'selected' : ''}`}
-            role="option"
-            aria-selected={isSelected}
-            style={style}
-            title={option.title}
-        >
-            <input
-                type="checkbox"
-                checked={isSelected}
-                value={
-                    typeof option.value === 'boolean'
-                        ? `${option.value}`
-                        : option.value
-                }
-                disabled={!!option.disabled}
-                onChange={() => onClick(option)}
-                readOnly
-                className="dash-dropdown-option-checkbox"
-            />
-            <span className="dash-dropdown-option-text">
-                <DropdownLabel {...option} index={index} />
-            </span>
-        </label>
-    );
-};
+import {DetailedOption, DropdownProps, OptionValue} from '../types';
+import {OptionsList, OptionLabel} from '../utils/optionRendering';
 
 const Dropdown = (props: DropdownProps) => {
     const {
@@ -98,12 +37,9 @@ const Dropdown = (props: DropdownProps) => {
         style,
         value,
     } = props;
-    const [optionsCheck, setOptionsCheck] =
-        useState<DetailedDropdownOption[]>();
+    const [optionsCheck, setOptionsCheck] = useState<DetailedOption[]>();
     const [isOpen, setIsOpen] = useState(false);
-    const [displayOptions, setDisplayOptions] = useState<
-        DetailedDropdownOption[]
-    >([]);
+    const [displayOptions, setDisplayOptions] = useState<DetailedOption[]>([]);
     const persistentOptions = useRef<DropdownProps['options']>([]);
     const dropdownContainerRef = useRef<HTMLDivElement>(null);
 
@@ -124,7 +60,7 @@ const Dropdown = (props: DropdownProps) => {
         [persistentOptions.current, searchable, search_value]
     );
 
-    const sanitizedValues: DropdownValue[] = useMemo(() => {
+    const sanitizedValues: OptionValue[] = useMemo(() => {
         if (value instanceof Array) {
             return value;
         }
@@ -134,58 +70,8 @@ const Dropdown = (props: DropdownProps) => {
         return [value];
     }, [value]);
 
-    const toggleOption = useCallback(
-        (option: DetailedDropdownOption) => {
-            const isCurrentlySelected = sanitizedValues.includes(option.value);
-
-            // Close dropdown if closeOnSelect is true (default behavior)
-            if (closeOnSelect !== false) {
-                setIsOpen(false);
-            }
-
-            if (multi) {
-                let newValues: DropdownValue[];
-
-                if (isCurrentlySelected) {
-                    // Deselecting: only allow if clearable is true or more than one option selected
-                    if (clearable || sanitizedValues.length > 1) {
-                        newValues = sanitizedValues.filter(
-                            v => v !== option.value
-                        );
-                    } else {
-                        // Cannot deselect the last option when clearable is false
-                        return;
-                    }
-                } else {
-                    // Selecting: add to current selection
-                    newValues = [...sanitizedValues, option.value];
-                }
-
-                setProps({value: newValues});
-            } else {
-                let newValue: DropdownValue | null;
-
-                if (isCurrentlySelected) {
-                    // Deselecting: only allow if clearable is true
-                    if (clearable) {
-                        newValue = null;
-                    } else {
-                        // Cannot deselect when clearable is false
-                        return;
-                    }
-                } else {
-                    // Selecting: set as the single value
-                    newValue = option.value;
-                }
-
-                setProps({value: newValue});
-            }
-        },
-        [multi, clearable, closeOnSelect, sanitizedValues]
-    );
-
     const updateSelection = useCallback(
-        (selection: DropdownValue[]) => {
+        (selection: OptionValue[]) => {
             if (closeOnSelect !== false) {
                 setIsOpen(false);
             }
@@ -266,7 +152,7 @@ const Dropdown = (props: DropdownProps) => {
             );
             return (
                 <React.Fragment key={`${option?.value}-${i}`}>
-                    {option && <DropdownLabel {...option} index={i} />}
+                    {option && <OptionLabel {...option} index={i} />}
                     {i === sanitizedValues.length - 1 ? '' : ', '}
                 </React.Fragment>
             );
@@ -283,13 +169,6 @@ const Dropdown = (props: DropdownProps) => {
         );
     }, [clearable, sanitizedValues, displayOptions, search_value]);
 
-    const handleOptionClick = useCallback(
-        (option: DetailedDropdownOption) => {
-            toggleOption(option);
-        },
-        [toggleOption]
-    );
-
     const handleClear = useCallback(() => {
         const finalValue: DropdownProps['value'] = multi ? [] : null;
         setProps({value: finalValue});
@@ -433,8 +312,8 @@ const Dropdown = (props: DropdownProps) => {
 
             if (open) {
                 // Sort options: selected first, then unselected
-                const selectedOptions: DetailedDropdownOption[] = [];
-                const unselectedOptions: DetailedDropdownOption[] = [];
+                const selectedOptions: DetailedOption[] = [];
+                const unselectedOptions: DetailedOption[] = [];
 
                 // First, collect selected options in the order they appear in the `value` array
                 sanitizedValues.forEach(value => {
@@ -583,6 +462,11 @@ const Dropdown = (props: DropdownProps) => {
                                     onSelectionChange={updateSelection}
                                     className="dash-dropdown-options"
                                     optionClassName="dash-dropdown-option"
+                                    optionStyle={{
+                                        height: optionHeight
+                                            ? `${optionHeight}px`
+                                            : undefined,
+                                    }}
                                 />
                             </>
                         )}
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
index 7421f6a759..cd207d0123 100644
--- a/components/dash-core-components/src/types.ts
+++ b/components/dash-core-components/src/types.ts
@@ -344,16 +344,16 @@ export interface RangeSliderProps {
     persistence_type?: PersistenceTypes;
 }
 
-export type DropdownValue = string | number | boolean;
+export type OptionValue = string | number | boolean;
 
-export type DetailedDropdownOption = {
+export type DetailedOption = {
     label: string | DashComponent | DashComponent[];
     /**
      * The value of the option. This value
      * corresponds to the items specified in the
      * `value` property.
      */
-    value: DropdownValue;
+    value: OptionValue;
     /**
      * If true, this option is disabled and cannot be selected.
      */
@@ -376,7 +376,7 @@ export type DetailedDropdownOption = {
 /**
  * Array of options where the label and the value are the same thing, or an option dict
  */
-export type DropdownOptionsArray = (DropdownValue | DetailedDropdownOption)[];
+export type OptionsArray = (OptionValue | DetailedOption)[];
 
 /**
  * Simpler `options` representation in dictionary format. The order is not guaranteed.
@@ -384,14 +384,14 @@ export type DropdownOptionsArray = (DropdownValue | DetailedDropdownOption)[];
  * which is equal to
  * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
  */
-export type DropdownOptionsDict = Record<string, string>;
+export type OptionsDict = Record<string, string>;
 
 export interface DropdownProps {
     /**
      * An array of options {label: [string|number], value: [string|number]},
      * an optional disabled field can be used for each option
      */
-    options?: DropdownOptionsArray | DropdownOptionsDict;
+    options?: OptionsArray | OptionsDict;
 
     /**
      * The value of the input. If `multi` is false (the default)
@@ -401,7 +401,7 @@ export interface DropdownProps {
      * array of items with values corresponding to those in the
      * `options` prop.
      */
-    value?: DropdownValue | DropdownValue[] | null;
+    value?: OptionValue | OptionValue[] | null;
 
     /**
      * If true, the user can select multiple values
@@ -502,12 +502,12 @@ export interface ChecklistProps {
     /**
      * An array of options
      */
-    options?: DropdownOptionsArray | DropdownOptionsDict;
+    options?: OptionsArray | OptionsDict;
 
     /**
      * The currently selected value
      */
-    value?: DropdownValue[] | null;
+    value?: OptionValue[] | null;
 
     /**
      * Indicates whether the options labels should be displayed inline (true=horizontal)
diff --git a/components/dash-core-components/src/utils/dropdownSearch.ts b/components/dash-core-components/src/utils/dropdownSearch.ts
index 79e428428c..b2d5ed285a 100644
--- a/components/dash-core-components/src/utils/dropdownSearch.ts
+++ b/components/dash-core-components/src/utils/dropdownSearch.ts
@@ -5,7 +5,7 @@ import {
     UnorderedSearchIndex,
 } from 'js-search';
 import {sanitizeOptions} from './optionTypes';
-import {DetailedDropdownOption, DropdownProps} from '../types';
+import {DetailedOption, DropdownProps} from '../types';
 
 // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
 // Split on spaces
@@ -20,8 +20,8 @@ const TOKENIZER = {
 };
 
 interface FilteredOptionsResult {
-    sanitizedOptions: DetailedDropdownOption[];
-    filteredOptions: DetailedDropdownOption[];
+    sanitizedOptions: DetailedOption[];
+    filteredOptions: DetailedOption[];
 }
 
 /**
@@ -83,7 +83,7 @@ export function createFilteredOptions(
         search.addDocuments(sanitized);
     }
 
-    const filtered = search.search(searchValue) as DetailedDropdownOption[];
+    const filtered = search.search(searchValue) as DetailedOption[];
 
     return {
         sanitizedOptions: sanitized || [],
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
index d27517c89f..d62ea8d87b 100644
--- a/components/dash-core-components/src/utils/optionRendering.tsx
+++ b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {append, includes, without} from 'ramda';
-import {DetailedDropdownOption, DropdownValue} from 'src/types';
+import {DetailedOption, OptionValue} from 'src/types';
 import '../components/css/optionslist.css';
 
 interface StylingProps {
@@ -18,13 +18,13 @@ interface StylingProps {
 
 interface OptionProps extends StylingProps {
     index: number;
-    option: DetailedDropdownOption;
+    option: DetailedOption;
     isSelected: boolean;
-    onChange: (option: DetailedDropdownOption) => void;
+    onChange: (option: DetailedOption) => void;
 }
 
-function OptionLabel(
-    props: DetailedDropdownOption & {index: string | number}
+export function OptionLabel(
+    props: DetailedOption & {index: string | number}
 ): JSX.Element {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
@@ -108,9 +108,9 @@ export const Option: React.FC<OptionProps> = ({
 };
 
 interface OptionsListProps extends StylingProps {
-    options: DetailedDropdownOption[];
-    selected: DropdownValue[];
-    onSelectionChange: (selected: DropdownValue[]) => void;
+    options: DetailedOption[];
+    selected: OptionValue[];
+    onSelectionChange: (selected: OptionValue[]) => void;
 }
 
 export const OptionsList: React.FC<OptionsListProps> = ({
@@ -134,7 +134,7 @@ export const OptionsList: React.FC<OptionsListProps> = ({
                         option={option}
                         isSelected={isSelected}
                         onChange={option => {
-                            let newValue: DropdownValue[];
+                            let newValue: OptionValue[];
                             if (includes(option.value, selected)) {
                                 newValue = without([option.value], selected);
                             } else {
diff --git a/components/dash-core-components/src/utils/optionTypes.ts b/components/dash-core-components/src/utils/optionTypes.ts
index 0484707226..4aeb0951c1 100644
--- a/components/dash-core-components/src/utils/optionTypes.ts
+++ b/components/dash-core-components/src/utils/optionTypes.ts
@@ -1,13 +1,13 @@
 import React from 'react';
-import {DetailedDropdownOption, DropdownProps, DropdownValue} from '../types';
+import {DetailedOption, DropdownProps, OptionValue} from '../types';
 
-const isDropdownValue = (option: unknown): option is DropdownValue => {
+const isDropdownValue = (option: unknown): option is OptionValue => {
     return ['string', 'number', 'boolean'].includes(typeof option);
 };
 
 export const sanitizeOptions = (
     options: DropdownProps['options']
-): DetailedDropdownOption[] => {
+): DetailedOption[] => {
     if (typeof options === 'object' && !(options instanceof Array)) {
         return Object.entries(options).map(([value, label]) => ({
             label: React.isValidElement(label) ? label : String(label),

From d689206c3022b19d750e6fe4a2a2bb266b650cd5 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 26 Sep 2025 12:53:46 -0600
Subject: [PATCH 3/6] Fix missing persistence

---
 components/dash-core-components/src/components/Checklist.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/dash-core-components/src/components/Checklist.tsx b/components/dash-core-components/src/components/Checklist.tsx
index e0b1634e67..b9cfa4bacc 100644
--- a/components/dash-core-components/src/components/Checklist.tsx
+++ b/components/dash-core-components/src/components/Checklist.tsx
@@ -61,3 +61,8 @@ export default function Checklist({
         </LoadingElement>
     );
 }
+
+Checklist.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};

From 88391b41f251fa5c6b4ed86269119defe95c6d21 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 26 Sep 2025 13:33:16 -0600
Subject: [PATCH 4/6] fix test

---
 .../dash-core-components/src/components/Checklist.tsx     | 3 +--
 .../dash-core-components/src/utils/optionRendering.tsx    | 7 +++++--
 tests/integration/renderer/test_component_as_prop.py      | 8 ++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/dash-core-components/src/components/Checklist.tsx b/components/dash-core-components/src/components/Checklist.tsx
index b9cfa4bacc..f7b6481adc 100644
--- a/components/dash-core-components/src/components/Checklist.tsx
+++ b/components/dash-core-components/src/components/Checklist.tsx
@@ -1,11 +1,10 @@
 import React, {useMemo} from 'react';
-import {append, includes, without} from 'ramda';
 import {ChecklistProps, PersistedProps, PersistenceTypes} from '../types';
 import './css/checklist.css';
 
 import {sanitizeOptions} from '../utils/optionTypes';
 import LoadingElement from '../utils/_LoadingElement';
-import {Option, OptionsList} from '../utils/optionRendering';
+import {OptionsList} from '../utils/optionRendering';
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
index d62ea8d87b..c2e0313897 100644
--- a/components/dash-core-components/src/utils/optionRendering.tsx
+++ b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -84,7 +84,6 @@ export const Option: React.FC<OptionProps> = ({
             role="option"
             aria-selected={isSelected}
             style={optionStyle}
-            title={option.title}
         >
             <input
                 type={inputType}
@@ -100,7 +99,11 @@ export const Option: React.FC<OptionProps> = ({
                 className={inputClassNames.join(' ')}
                 style={inputStyle}
             />
-            <span className={labelClassNames.join(' ')} style={labelStyle}>
+            <span
+                className={labelClassNames.join(' ')}
+                style={labelStyle}
+                title={option.title}
+            >
                 <OptionLabel {...option} index={index} />
             </span>
         </label>
diff --git a/tests/integration/renderer/test_component_as_prop.py b/tests/integration/renderer/test_component_as_prop.py
index 157fde2ecf..5478c33493 100644
--- a/tests/integration/renderer/test_component_as_prop.py
+++ b/tests/integration/renderer/test_component_as_prop.py
@@ -358,9 +358,13 @@ def demo(n_clicks):
 
     dash_duo.wait_for_element("#add-option").click()
     for i in range(1, n + 2):
-        dash_duo.wait_for_text_to_equal(f"#options label:nth-child({i}) span", "")
+        dash_duo.wait_for_text_to_equal(
+            f"#options label:nth-child({i}) span.label-result", ""
+        )
         dash_duo.wait_for_element(f"#options label:nth-child({i}) button").click()
-        dash_duo.wait_for_text_to_equal(f"#options label:nth-child({i}) span", "1")
+        dash_duo.wait_for_text_to_equal(
+            f"#options label:nth-child({i}) span.label-result", "1"
+        )
 
 
 @flaky(max_runs=3)

From 628966f1b4f6d762821f880ec5bec1ee2b0d48ac Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 26 Sep 2025 16:35:22 -0600
Subject: [PATCH 5/6] Implement RadioItems and condense types

---
 .../src/components/RadioItems.react.js        | 221 -----------------
 .../src/components/RadioItems.tsx             |  69 ++++++
 .../src/components/css/checklist.css          |   2 +-
 .../src/components/css/optionslist.css        |   7 +-
 .../src/components/css/radioitems.css         |   4 +
 components/dash-core-components/src/index.ts  |   2 +-
 components/dash-core-components/src/types.ts  | 231 ++++++------------
 .../src/utils/optionRendering.tsx             |   3 +
 8 files changed, 156 insertions(+), 383 deletions(-)
 delete mode 100644 components/dash-core-components/src/components/RadioItems.react.js
 create mode 100644 components/dash-core-components/src/components/RadioItems.tsx
 create mode 100644 components/dash-core-components/src/components/css/radioitems.css

diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
deleted file mode 100644
index 918600c88c..0000000000
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {Component} from 'react';
-import './css/react-select@1.0.0-rc.3.min.css';
-import {sanitizeOptions} from '../utils/optionTypes';
-import LoadingElement from '../utils/LoadingElement';
-
-/**
- * RadioItems is a component that encapsulates several radio item inputs.
- * The values and labels of the RadioItems is specified in the `options`
- * property and the seleced item is specified with the `value` property.
- * Each radio item is rendered as an input with a surrounding label.
- */
-
-export default class RadioItems extends Component {
-    render() {
-        const {
-            id,
-            className,
-            style,
-            inputClassName,
-            inputStyle,
-            labelClassName,
-            labelStyle,
-            options,
-            setProps,
-            value,
-            inline,
-        } = this.props;
-
-        let ids = {};
-        if (id) {
-            ids = {id, key: id};
-        }
-        return (
-            <LoadingElement {...ids} className={className} style={style}>
-                {sanitizeOptions(options).map(option => (
-                    <label
-                        style={{
-                            display: inline ? 'inline-block' : 'block',
-                            ...labelStyle,
-                        }}
-                        className={labelClassName}
-                        key={option.value}
-                        title={option.title}
-                    >
-                        <input
-                            checked={option.value === value}
-                            className={inputClassName}
-                            disabled={Boolean(option.disabled)}
-                            style={inputStyle}
-                            type="radio"
-                            onChange={() => {
-                                setProps({value: option.value});
-                            }}
-                        />
-                        {option.label}
-                    </label>
-                ))}
-            </LoadingElement>
-        );
-    }
-}
-
-RadioItems.propTypes = {
-    /**
-     * An array of options, or inline dictionary of options
-     */
-    options: PropTypes.oneOfType([
-        /**
-         * Array of options where the label and the value are the same thing - [string|number|bool]
-         */
-        PropTypes.arrayOf(
-            PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.number,
-                PropTypes.bool,
-            ])
-        ),
-        /**
-         * Simpler `options` representation in dictionary format. The order is not guaranteed.
-         * {`value1`: `label1`, `value2`: `label2`, ... }
-         * which is equal to
-         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
-         */
-        PropTypes.object,
-        /**
-         * An array of options {label: [string|number], value: [string|number]},
-         * an optional disabled field can be used for each option
-         */
-        PropTypes.arrayOf(
-            PropTypes.exact({
-                /**
-                 * The option's label
-                 */
-                label: PropTypes.node.isRequired,
-
-                /**
-                 * The value of the option. This value
-                 * corresponds to the items specified in the
-                 * `value` property.
-                 */
-                value: PropTypes.oneOfType([
-                    PropTypes.string,
-                    PropTypes.number,
-                    PropTypes.bool,
-                ]).isRequired,
-
-                /**
-                 * If true, this option is disabled and cannot be selected.
-                 */
-                disabled: PropTypes.bool,
-
-                /**
-                 * The HTML 'title' attribute for the option. Allows for
-                 * information on hover. For more information on this attribute,
-                 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
-                 */
-                title: PropTypes.string,
-            })
-        ),
-    ]),
-
-    /**
-     * The currently selected value
-     */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-        PropTypes.bool,
-    ]),
-
-    /**
-     * Indicates whether the options labels should be displayed inline (true=horizontal)
-     * or in a block (false=vertical).
-     */
-    inline: PropTypes.bool,
-
-    /**
-     * The style of the container (div)
-     */
-    style: PropTypes.object,
-
-    /**
-     * The class of the container (div)
-     */
-    className: PropTypes.string,
-
-    /**
-     * The style of the <input> radio element
-     */
-    inputStyle: PropTypes.object,
-
-    /**
-     * The class of the <input> radio element
-     */
-    inputClassName: PropTypes.string,
-
-    /**
-     * The style of the <label> that wraps the radio input
-     *  and the option's label
-     */
-    labelStyle: PropTypes.object,
-
-    /**
-     * The class of the <label> that wraps the radio input
-     *  and the option's label
-     */
-    labelClassName: PropTypes.string,
-
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
-    /**
-     * Dash-assigned callback that gets fired when the value changes.
-     */
-    setProps: PropTypes.func,
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.string,
-        PropTypes.number,
-    ]),
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
-};
-
-RadioItems.defaultProps = {
-    inputStyle: {},
-    inputClassName: '',
-    labelStyle: {},
-    labelClassName: '',
-    options: [],
-    persisted_props: ['value'],
-    persistence_type: 'local',
-    inline: false,
-};
diff --git a/components/dash-core-components/src/components/RadioItems.tsx b/components/dash-core-components/src/components/RadioItems.tsx
new file mode 100644
index 0000000000..79635ec58b
--- /dev/null
+++ b/components/dash-core-components/src/components/RadioItems.tsx
@@ -0,0 +1,69 @@
+import React, {useMemo} from 'react';
+import {RadioItemsProps, PersistedProps, PersistenceTypes} from '../types';
+import './css/radioitems.css';
+
+import {sanitizeOptions} from '../utils/optionTypes';
+import LoadingElement from '../utils/_LoadingElement';
+import {OptionsList} from '../utils/optionRendering';
+import {isNil} from 'ramda';
+
+/**
+ * RadioItems is a component that encapsulates several radio item inputs.
+ * The values and labels of the RadioItems is specified in the `options`
+ * property and the seleced item is specified with the `value` property.
+ * Each radio item is rendered as an input with a surrounding label.
+ */
+export default function RadioItems({
+    className,
+    id,
+    style,
+    setProps,
+    value,
+    inputStyle = {},
+    inputClassName = '',
+    labelStyle = {},
+    labelClassName = '',
+    options = [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.value],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    inline = false,
+}: RadioItemsProps) {
+    const sanitizedOptions = useMemo(() => {
+        return sanitizeOptions(options);
+    }, [options]);
+
+    const stylingProps = {
+        id,
+        className: 'dash-radioitems ' + (className ?? ''),
+        style,
+        optionClassName: inline ? 'dash-radioitems-inline' : undefined,
+        inputStyle,
+        inputClassName,
+        labelStyle,
+        labelClassName,
+    };
+
+    return (
+        <LoadingElement>
+            {loadingProps => (
+                <OptionsList
+                    {...loadingProps}
+                    inputType="radio"
+                    options={sanitizedOptions}
+                    selected={isNil(value) ? [] : [value]}
+                    onSelectionChange={selection => {
+                        setProps({value: selection[selection.length - 1]});
+                    }}
+                    {...stylingProps}
+                />
+            )}
+        </LoadingElement>
+    );
+}
+
+RadioItems.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};
diff --git a/components/dash-core-components/src/components/css/checklist.css b/components/dash-core-components/src/components/css/checklist.css
index 0646d87af4..76c0eaac1f 100644
--- a/components/dash-core-components/src/components/css/checklist.css
+++ b/components/dash-core-components/src/components/css/checklist.css
@@ -1,4 +1,4 @@
 .dash-options-list-option.dash-checklist-inline {
-    display: inline-block;
+    display: inline-flex;
     margin-right: calc(var(--Dash-Spacing) * 4);
 }
diff --git a/components/dash-core-components/src/components/css/optionslist.css b/components/dash-core-components/src/components/css/optionslist.css
index 10f0e7404a..1a73ece770 100644
--- a/components/dash-core-components/src/components/css/optionslist.css
+++ b/components/dash-core-components/src/components/css/optionslist.css
@@ -6,7 +6,6 @@
     display: flex;
     align-items: center;
     user-select: none;
-    overflow: hidden;
 }
 
 .dash-options-list-option:not(:has(input[disabled])):hover,
@@ -22,10 +21,8 @@
 
 .dash-options-list-option-text {
     white-space: pre;
-}
-
-.dash-options-list-option-text > * {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
 }
 
 .dash-options-list-option-checkbox {
diff --git a/components/dash-core-components/src/components/css/radioitems.css b/components/dash-core-components/src/components/css/radioitems.css
new file mode 100644
index 0000000000..c22a6cca38
--- /dev/null
+++ b/components/dash-core-components/src/components/css/radioitems.css
@@ -0,0 +1,4 @@
+.dash-options-list-option.dash-radioitems-inline {
+    display: inline-flex;
+    margin-right: calc(var(--Dash-Spacing) * 4);
+}
diff --git a/components/dash-core-components/src/index.ts b/components/dash-core-components/src/index.ts
index b93f8b9c68..6e73047885 100644
--- a/components/dash-core-components/src/index.ts
+++ b/components/dash-core-components/src/index.ts
@@ -15,7 +15,7 @@ import Link from './components/Link.react';
 import Loading from './components/Loading.react';
 import Location from './components/Location.react';
 import Markdown from './components/Markdown.react';
-import RadioItems from './components/RadioItems.react';
+import RadioItems from './components/RadioItems';
 import RangeSlider from './components/RangeSlider';
 import Slider from './components/Slider';
 import Store from './components/Store.react';
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
index cd207d0123..c03f79afab 100644
--- a/components/dash-core-components/src/types.ts
+++ b/components/dash-core-components/src/types.ts
@@ -22,6 +22,50 @@ export enum PersistedProps {
     'value' = 'value',
 }
 
+export interface BaseComponentProps<T> {
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id?: string;
+
+    /**
+     * Additional CSS class for the root DOM node
+     */
+    className?: string;
+
+    /**
+     * Dash-assigned callback that gets fired when component properties change
+     */
+    setProps: (props: Partial<T>) => void;
+
+    /**
+     * Used to allow user interactions in this component to be persisted when
+     * the component - or the page - is refreshed. If `persisted` is truthy and
+     * hasn't changed from its previous value, a `value` that the user has
+     * changed while using the app will keep that change, as long as
+     * the new `value` also matches what was given originally.
+     * Used in conjunction with `persistence_type`.
+     */
+    persistence?: boolean | string | number;
+
+    /**
+     * Properties whose user interactions will persist after refreshing the
+     * component or the page. Since only `value` is allowed this prop can
+     * normally be ignored.
+     */
+    persisted_props?: PersistedProps[];
+
+    /**
+     * Where persisted user changes will be stored:
+     * memory: only kept in memory, reset on page refresh.
+     * local: window.localStorage, data is kept after the browser quit.
+     * session: window.sessionStorage, data is cleared once the browser quit.
+     */
+    persistence_type?: PersistenceTypes;
+}
+
 export type SliderMarks = {
     [key: number]: string | {label: string; style?: React.CSSProperties};
 };
@@ -78,7 +122,7 @@ export type SliderTooltip = {
     transform?: string;
 };
 
-export interface SliderProps {
+export interface SliderProps extends BaseComponentProps<SliderProps> {
     /**
      * Minimum allowed value of the slider
      */
@@ -158,51 +202,9 @@ export interface SliderProps {
      * The height, in px, of the slider if it is vertical.
      */
     verticalHeight?: number;
-
-    /**
-     * Additional CSS class for the root DOM node
-     */
-    className?: string;
-
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id?: string;
-
-    /**
-     * Dash-assigned callback that gets fired when the value or drag_value changes.
-     */
-    setProps: (props: Partial<SliderProps>) => void;
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence?: boolean | string | number;
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props?: PersistedProps[];
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type?: PersistenceTypes;
 }
 
-export interface RangeSliderProps {
+export interface RangeSliderProps extends BaseComponentProps<RangeSliderProps> {
     /**
      * Minimum allowed value of the slider
      */
@@ -300,48 +302,6 @@ export interface RangeSliderProps {
      * The height, in px, of the slider if it is vertical.
      */
     verticalHeight?: number;
-
-    /**
-     * Additional CSS class for the root DOM node
-     */
-    className?: string;
-
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id?: string;
-
-    /**
-     * Dash-assigned callback that gets fired when the value or drag_value changes.
-     */
-    setProps: (props: Partial<RangeSliderProps>) => void;
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence?: boolean | string | number;
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props?: PersistedProps[];
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type?: PersistenceTypes;
 }
 
 export type OptionValue = string | number | boolean;
@@ -386,7 +346,7 @@ export type OptionsArray = (OptionValue | DetailedOption)[];
  */
 export type OptionsDict = Record<string, string>;
 
-export interface DropdownProps {
+export interface DropdownProps extends BaseComponentProps<DropdownProps> {
     /**
      * An array of options {label: [string|number], value: [string|number]},
      * an optional disabled field can be used for each option
@@ -454,51 +414,54 @@ export interface DropdownProps {
      * Defines CSS styles which will override styles previously set.
      */
     style?: React.CSSProperties;
+}
 
+export interface ChecklistProps extends BaseComponentProps<ChecklistProps> {
     /**
-     * className of the dropdown element
+     * An array of options
      */
-    className?: string;
+    options?: OptionsArray | OptionsDict;
 
     /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
+     * The currently selected value
      */
-    id?: string;
+    value?: OptionValue[] | null;
 
     /**
-     * Dash-assigned callback that gets fired when the input changes
+     * Indicates whether the options labels should be displayed inline (true=horizontal)
+     * or in a block (false=vertical).
      */
-    setProps: (props: Partial<DropdownProps>) => void;
+    inline?: boolean;
 
     /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
+     * The style of the container (div)
      */
-    persistence?: boolean | string | number;
+    style?: React.CSSProperties;
 
     /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
+     * The style of the <input> checkbox element
      */
-    persisted_props?: PersistedProps[];
+    inputStyle?: React.CSSProperties;
 
     /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
+     * The class of the <input> checkbox element
      */
-    persistence_type?: PersistenceTypes;
+    inputClassName?: string;
+
+    /**
+     * The style of the <label> that wraps the checkbox input
+     *  and the option's label
+     */
+    labelStyle?: React.CSSProperties;
+
+    /**
+     * The class of the <label> that wraps the checkbox input
+     *  and the option's label
+     */
+    labelClassName?: string;
 }
 
-export interface ChecklistProps {
+export interface RadioItemsProps extends BaseComponentProps<RadioItemsProps> {
     /**
      * An array of options
      */
@@ -507,7 +470,7 @@ export interface ChecklistProps {
     /**
      * The currently selected value
      */
-    value?: OptionValue[] | null;
+    value?: OptionValue | null;
 
     /**
      * Indicates whether the options labels should be displayed inline (true=horizontal)
@@ -515,11 +478,6 @@ export interface ChecklistProps {
      */
     inline?: boolean;
 
-    /**
-     * The class of the container (div)
-     */
-    className?: string;
-
     /**
      * The style of the container (div)
      */
@@ -546,41 +504,4 @@ export interface ChecklistProps {
      *  and the option's label
      */
     labelClassName?: string;
-
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id?: string;
-
-    /**
-     * Dash-assigned callback that gets fired when the value changes.
-     */
-    setProps: (props: Partial<ChecklistProps>) => void;
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence?: boolean | string | number;
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props?: PersistedProps[];
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type?: PersistenceTypes;
 }
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
index c2e0313897..a43fcb68d1 100644
--- a/components/dash-core-components/src/utils/optionRendering.tsx
+++ b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -61,6 +61,7 @@ export const Option: React.FC<OptionProps> = ({
     labelClassName,
     labelStyle,
     index,
+    id,
 }) => {
     const classNames = [
         'dash-options-list-option',
@@ -88,6 +89,7 @@ export const Option: React.FC<OptionProps> = ({
             <input
                 type={inputType}
                 checked={isSelected}
+                name={id}
                 value={
                     typeof option.value === 'boolean'
                         ? `${option.value}`
@@ -132,6 +134,7 @@ export const OptionsList: React.FC<OptionsListProps> = ({
                 const isSelected = includes(option.value, selected);
                 return (
                     <Option
+                        id={id}
                         key={i}
                         index={i}
                         option={option}

From 7c826eb50ce9d61f6660eece76bb2a7fb404383f Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 29 Sep 2025 13:40:26 -0600
Subject: [PATCH 6/6] code review feedback

---
 .../src/utils/optionRendering.tsx             | 34 +++++++++++--------
 .../src/utils/optionTypes.ts                  |  6 ++--
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
index a43fcb68d1..3875c3b458 100644
--- a/components/dash-core-components/src/utils/optionRendering.tsx
+++ b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -16,37 +16,43 @@ interface StylingProps {
     labelStyle?: React.CSSProperties;
 }
 
-interface OptionProps extends StylingProps {
-    index: number;
-    option: DetailedOption;
-    isSelected: boolean;
-    onChange: (option: DetailedOption) => void;
+interface OptionLabelProps extends DetailedOption {
+    index: string | number;
 }
 
-export function OptionLabel(
-    props: DetailedOption & {index: string | number}
-): JSX.Element {
+export const OptionLabel: React.FC<OptionLabelProps> = ({
+    index,
+    label,
+    title,
+    value,
+}) => {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
 
-    if (typeof props.label === 'object') {
-        const labels =
-            props.label instanceof Array ? props.label : [props.label];
+    if (typeof label === 'object') {
+        const labels = label instanceof Array ? label : [label];
         return (
             <>
                 {labels.map((label, i) => (
                     <ExternalWrapper
                         key={i}
                         component={label}
-                        componentPath={[...ctx.componentPath, props.index, i]}
+                        componentPath={[...ctx.componentPath, index, i]}
                     />
                 ))}
             </>
         );
     }
 
-    const displayLabel = `${props.label ?? props.value}`;
-    return <span title={props.title}>{displayLabel}</span>;
+    const displayLabel = `${label ?? value}`;
+    return <span title={title}>{displayLabel}</span>;
+};
+
+interface OptionProps extends StylingProps {
+    index: number;
+    option: DetailedOption;
+    isSelected: boolean;
+    onChange: (option: DetailedOption) => void;
 }
 
 export const Option: React.FC<OptionProps> = ({
diff --git a/components/dash-core-components/src/utils/optionTypes.ts b/components/dash-core-components/src/utils/optionTypes.ts
index 4aeb0951c1..af7f75d07c 100644
--- a/components/dash-core-components/src/utils/optionTypes.ts
+++ b/components/dash-core-components/src/utils/optionTypes.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import {DetailedOption, DropdownProps, OptionValue} from '../types';
 
-const isDropdownValue = (option: unknown): option is OptionValue => {
+const isOptionValue = (option: unknown): option is OptionValue => {
     return ['string', 'number', 'boolean'].includes(typeof option);
 };
 
@@ -17,11 +17,11 @@ export const sanitizeOptions = (
 
     if (options instanceof Array) {
         return options.map(option => {
-            return isDropdownValue(option)
+            return isOptionValue(option)
                 ? {label: String(option), value: option}
                 : option;
         });
     }
 
-    return options;
+    return [];
 };