How Can I Change SelectItemIndicator ?

[Uhasith]

I want to show a different icon for non-selected items. How can I achieve that? How can I access the selected state to use v-if and v-else?

<template>
  <SelectItem
    v-bind="forwardedProps"
    :class="
      cn(
        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )
    "
  >
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectItemIndicator>
        <Check class="h-4 w-4" />
      </SelectItemIndicator>
    </span>

    <SelectItemText>
      <slot />
    </SelectItemText>
  </SelectItem>
</template>

[Uhasith]

@sadeghbarati Sorry for mentioning mate. Could you give me an answer to this? How to set a different icon for non-selected items? How can I access the checked state inside the SelectItem component ? data-[checked]:hidden not working?

[sadeghbarati]

@Uhasith Hi check this, check SelectItem.vue, added group class to SelectItem component, then after SelectItemIndicator, added a span with class of group-data-[state='checked']:hidden

https://stackblitz.com/edit/cr9ryj

[Uhasith]

Thank You, Mate !!! ❤️