renderSelection

This an example how you can create your own renderSelection function. For multiple selection rendering see renderTags.


import { AutocompleteOptionDefault } from '@creation-ui/react'
 
export const renderSelection = (option: AutocompleteOptionDefault) => {
  return <span>{option.label}</span>
}

Custom example


type Character = {
  id: string
  name: string
  image: string
  species: string
  //... rest
}
 
const renderSelection = ({ image, name, species }: Character) => (
  <div className='h-fit w-fit p-2 mr-2'>
    <div className='flex gap-2 items-center'>
      <Avatar size='sm' src={image} />
      <div className='flex flex-col'>
        <span className='font-medium'>{name}</span>
        <span className='text-info text-xs'>{species}</span>
      </div>
    </div>
  </div>
)