Can't I put a React component in the select component label?

[ryuhangyeong]

For my requirements, I need a UI like below.

When you select an element in Select you should see an icon in the input.

I solved this in the following way, but can't it be solved with mantine's own function?

<div className="relative cursor-pointer">
  <Tooltip label="Opend Align" position="bottom" offset={10}>
    <Select
      data={[
        ALIGN_ITEMS?.left,
        ALIGN_ITEMS?.center,
        ALIGN_ITEMS?.right,
      ]?.map((n) => ({
        ...n,
        label: "",
      }))}
      renderOption={alignRenderSelectOption}
      value={alignType}
      onOptionSubmit={handleChangeAlignType}
      styles={{
        input: {
          "--input-bd-focus": "transparent",
        },
      }}
      variant="unstyled"
      allowDeselect={false}
      w={rem(40)}
      comboboxProps={{
        width: rem(60),
      }}
    />
  </Tooltip>

  <!-- Custom Here -->
  <div className="absolute top-0 left-0 flex items-center h-full">
    <span
      className={clsx(
        "flex items-center text-mt-gray-6 text-[14px]",
        {
          "text-mt-gray-9": [LEFT, CENTER, RIGHT].find(
            (alignment) =>
              editor?.isActive({ textAlign: alignment })
          ),
        }
      )}
    >
      {ALIGN_ITEMS?.[alignType || ""]?.icon ||
        ALIGN_ITEMS?.[LEFT]?.icon}
    </span>
  </div>

[ryuhangyeong]

Self Answer

I realized it too late.

I think this is possible with ComboxBox!