Custom – CUI

Autocomplete option and selection customization

Enhance your Autocomplete experience by using custom Option and SelectedOption components. This provides the flexibility to design and style options according to your application's needs and aesthetics.

Autocomplete - custom

Boba FettHuman

Code example

Checkout detailed documentation of renderOption and renderSelection.

import { AutocompleteOptionProps } from '@creation-ui/react'
 
type Character = {
  id: string
  name: string
  image: string
  species: string
  //... other fields
}
 
const renderOption = (props: AutocompleteOptionProps, option: Character) => (
  <div {...props} className={clsx(props.className, 'h-fit w-fit p-2')}>
    <div className='flex gap-2 items-center'>
      <Avatar size='sm' src={option.image} />
      <div className='flex flex-col'>
        <span className='font-medium'>{option.name}</span>
        <span className='text-xs'>{option.species}</span>
      </div>
    </div>
  </div>
)
 
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-xs'>{species}</span>
      </div>
    </div>
  </div>
)

renderSelection Calendar