Hide Arrow In Select Componet shadcn-vue

Question

Hi friends how can i hide arrow in Select Component in Vue-Shadcn

<div class="relative w-full items-center border rounded-md  ">
        <div class="ps-10">
          <Select v-model="userInformation.user.gender">
            <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0  " >
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem v-for="item in gender" :key="item.id" :value="item.value">
                  {{ item.name }}
                </SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
          <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" />
        </span>
      </div>

i try isArrow='false' is SelectTriger but its not working

Answer 1

Best 2 ways in which you can do that:

• Modify your SelectTrigger

You can remove that svg or render it conditionally

path: ui > select > SelectTrigger.vue

• With use of one tailwind class

<div class="relative w-full items-center rounded-md border">
  <div class="ps-10">
    <select v-model="userInformation.user.gender">
      <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0 [&_svg]:hidden">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem v-for="item in gender" :key="item.id" :value="item.value"> {{ item.name }} </SelectItem>
        </SelectGroup>
      </SelectContent>
    </select>
  </div>
  <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2">
    <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" />
  </span>
</div>

Changes:

• Added [&_svg]:hidden to the classlist of SelectTrigger, know more here