multi-select-checkboxes

[janlin002]

How can I achieve this effect using react-select?
(first checkbox is select all)
And if the number of selected items is more than 5, the actual content is not displayed.

[manjushsh]

Hi @janlin002, for showing checkbox and 'Select all' you can achieve with custom components. Example Sandbox or this thread or Stack Overflow
For three state checkbox there are package you can use or refer some online articles.
Hope this helps

[janlin002]

Thank you for your help, but I would like it to automatically collapse when it exceeds the input height, instead of increasing the input height.

[manjushsh]

Hi @janlin002, I have updated sandbox with change.
On clicking +n blocks, all extra blocks, all those extra blocks will be removed.
You can customize it with css to get desired output

[janlin002]

Thank you for your help, it has been very helpful to me.

[manjushsh]

I'm glad it helped

[User6531]

Hello @manjushsh, that's great, thanks for your example. Could you also assist me? I need to add a checkbox through props, for example, optionHasCheckmark, or add it when it's in multiselect mode. Do you have any ideas on how to implement this?

eg:

const CustomOption = <Option,>(optionProps: OptionProps<Option>) => {
  const { innerProps, children, isSelected } = optionProps;

  return (
    <S.CustomStyledOption
      {...innerProps}
      ref={innerProps.ref as React.RefObject<HTMLDivElement>}
    >
      {optionHasCheckmark && <Checkbox checked={isSelected} />}
      {children}
    </S.CustomStyledOption>
  );
};

[User6531]

I found solution

const CustomOption = <Option,>(optionProps: OptionProps<Option>) => {
  const {
    innerProps,
    children,
    isSelected,
    selectProps: { optionHasCheckmark },
  } = optionProps;

  return (
    <S.CustomStyledOption
      {...innerProps}
      ref={innerProps.ref as React.RefObject<HTMLDivElement>}
    >
      {optionHasCheckmark && <Checkbox checked={isSelected} />}
      {children}
    </S.CustomStyledOption>
  );
};