[tree view] SimpleTreeView Radio Support

[Lure5134]

Summary

If checkboxSelection is passed to a SimpleTreeView a Checkbox is displayed on the left side. It would be nice that when multiSelect is false a Radio instead of a Checkbox would be displayed.

Examples

No response

Motivation

No response

Search keywords: treeview,radio,checkbox

[michelengelen]

You can customize the icon or the component to render using this guide:
https://mui.com/x/react-tree-view/tree-item-customization/#checkbox

example:

import * as React from 'react';
import Box from '@mui/material/Box';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem, TreeItemProps, TreeItemSlotProps } from '@mui/x-tree-view/TreeItem';
import { MUI_X_PRODUCTS } from './products';

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  return (
    <TreeItem
      {...props}
      ref={ref}
      slotProps={
        {
          checkbox: {
            size: 'small',
            icon: <RadioButtonUncheckedIcon />,
            checkedIcon: <RadioButtonCheckedIcon />,
          },
        } as TreeItemSlotProps
      }
    />
  );
});

export default function CheckboxSlotProps() {
  return (
    <Box sx={{ minHeight: 200, minWidth: 350 }}>
      <RichTreeView
        defaultExpandedItems={['grid', 'pickers']}
        checkboxSelection
        items={MUI_X_PRODUCTS}
        slots={{ item: CustomTreeItem }}
      />
    </Box>
  );
}

[Lure5134]

@michelengelen Thanks, it kind of works. The items now display radio buttons and they behave correctly when selected. However, I noticed that if a child item is checked, the parent switches from a radio button to a tri-state checkbox. This feels a bit inconsistent visually, as the UI starts mixing radio buttons and checkboxes.

My initial question was whether it would be possible to use radio buttons by default when multiSelect is false. The reasoning is that checkboxes generally imply that multiple selections are allowed, whereas radio buttons better communicate single selection behavior.

[michelengelen]

@michelengelen Thanks, it kind of works. The items now display radio buttons and they behave correctly when selected. However, I noticed that if a child item is checked, the parent switches from a radio button to a tri-state checkbox. This feels a bit inconsistent visually, as the UI starts mixing radio buttons and checkboxes.

I haven't noticed that during my tests. Thanks for raising it. This should not happen.

My initial question was whether it would be possible to use radio buttons by default when multiSelect is false. The reasoning is that checkboxes generally imply that multiple selections are allowed, whereas radio buttons better communicate single selection behavior.

Yes, but that is a design choice (although it makes sense IMO), so I'll defer that to @noraleonte to decide.
I'll add this to the board as a feature request. 👍🏼

[noraleonte]

Hey @Lure5134 👋
You can replace the slot entirely with a radio button, and it should be behaving correctly I think 🤔 Here's a snippet for how to do that

import * as React from 'react';
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
import { MUI_X_PRODUCTS } from './products';

const CustomCheckbox = React.forwardRef(function CustomCheckbox(
  props: React.InputHTMLAttributes<HTMLInputElement>,
  ref: React.Ref<HTMLInputElement>,
) {
  return <input type="radio" ref={ref} {...props} />;
});

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  return (
    <TreeItem
      {...props}
      ref={ref}
      slots={{
        checkbox: CustomCheckbox,
      }}
    />
  );
});

export default function CheckboxSlot() {
  return (
    <Box sx={{ minHeight: 200, minWidth: 350 }}>
      <RichTreeView
        defaultExpandedItems={['grid', 'pickers']}
        checkboxSelection
        items={MUI_X_PRODUCTS}
        slots={{ item: CustomTreeItem }}
      />
    </Box>
  );
}

We can definitely add this example to the docs @michelengelen 👀
As for making this a default behavior when multiselect is disabled, it can make sense. We can discuss it in the grooming 👌