Replies: 3 comments
-
You can do it with props. In this example I use select.
|
Beta Was this translation helpful? Give feedback.
-
Hi @pavelbe, can you share with us the source code of your Select component? You can follow the path that @mukhammadxuja shared with us, but I'm thinking there is a problem with your Select component because there is a Select in your screenshot that has two icons, maybe you are using icons wrong. Place your icon inside the SelectTrigger component. |
Beta Was this translation helpful? Give feedback.
-
You could simply create a custom type and join the custom type with the type presents within the // custom prop type
type CustomSelectTriggerProps = {
rightIcon?: React.ReactNode;
};
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
CustomSelectTriggerProps // join the type using '&'
>(({ className, children, rightIcon = null, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
{rightIcon ? rightIcon : <CaretSortIcon className="h-4 w-4 opacity-50" />}
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; |
Beta Was this translation helpful? Give feedback.
-
Hello, friends!
I'm facing an issue with the Select component from the Shadcn/UI library. I want to remove the default arrows from the dropdown list, but I can't find a way to do it.
I have attached a screenshot where you can see that the arrows are still displayed despite my attempts to hide them.
Perhaps someone has encountered a similar issue before and knows how to solve it? I would appreciate any help and advice!
Thank you!
![2024-02-21_02-29-22](https://private-user-images.githubusercontent.com/9510939/306445516-baa371ee-fa3c-4a8e-818a-725f20505565.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk3NDcxMzQsIm5iZiI6MTcxOTc0NjgzNCwicGF0aCI6Ii85NTEwOTM5LzMwNjQ0NTUxNi1iYWEzNzFlZS1mYTNjLTRhOGUtODE4YS03MjVmMjA1MDU1NjUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYzMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MzBUMTEyNzE0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2ZmMzAwNGZlMmYyNjQ1M2YyYzY1ZmM5NWYyNzhmN2JhZGU2ZTg5NmJjZTY4YzZiOWYxMmM0NDk5MjNlOWJjOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.PBsLyeiqqvFaRmoemvgp-lPKhUn1yi4t2GJDN8YvQFw)
Beta Was this translation helpful? Give feedback.
All reactions