Disabled nodes

Child 1 is disabled, which also disables its children. Check Root 1: everything that can be checked is, but Root 1 shows as mixed because the disabled branch is still unchecked. Click Root 1 again to uncheck everything that can change.

Root 1▲

Child 1▲

Grandchild 1

Grandchild 2

Child 2

Root 2▲

Child 3

Child 4

Show code

DisabledNodesExample.tsx

import TreeSelect from '@attebyte/react-tree-select';
import { exampleDataWithDisabled, ExampleNode } from './data';

// With chained selection, checking 'Root 1' skips the disabled 'Child 1' branch, so 'Root 1' shows as
// mixed. Checking it again unchecks everything that can be changed.
export default function DisabledNodesExample() {
  return (
    <TreeSelect<ExampleNode>
      defaultData={exampleDataWithDisabled}
      uniqueIDProperty='value'
      labelProperty='label'
      childrenProperty='children'
      valueProperty='included'
      disabledProperty='disabled'
      defaultExpanded
      className='bg-neutral-800 text-white p-6 rounded font-sans'
      aria-label='Disabled nodes example'
    />
  );
}

See Selection for the full rules.