Options with icons with single select

[alexnguyennz]

Hi is there a version of this example but for single selection instead of multi (so the icon is displayed with the selected option)?

I've tried something like:

<Select
  value={{
    icon: <SomeComponent />, // similar to customComponent, render icon + label
    value: optionValue,
    label: (<SomeComponent />) as unknown as string 
  }} 
/>

Which works visually (making the current selection look just like the options) but it's not ideal.

Thanks.

[csandman]

Sorry for the super late reply, just started a new job and I've been very busy!

This isn't that hard if you make a custom SingleValue component (in the same way the example you linked does the MultiValue):

const customComponents = {
  Option: ({ children, ...props }) => (
    <chakraComponents.Option {...props}>
      <Icon
        as={props.data.Icon}
        color={props.data.iconColor}
        mr={2}
        h={5}
        w={5}
      />
      {children}
    </chakraComponents.Option>
  ),
  SingleValue: ({ children, ...props }) => (
    <chakraComponents.SingleValue {...props}>
      <Flex align="center">
        <Icon
          as={props.data.Icon}
          color={props.data.iconColor}
          mr={2}
          h={5}
          w={5}
        />
        {children}
      </Flex>
    </chakraComponents.SingleValue>
  )
};

CodeSandbox: https://codesandbox.io/s/4gsnly?file=/app.tsx

[alexnguyennz]

No worries - congrats on your new job!

That solution works great, thank you.

[csandman]

congrats on your new job!

Thanks a bunch! glad it worked out for you!