Select
Champ de selection deroulant pour choisir dans une liste d'options. Installez Select depuis le registre VLLNT UI avec la CLI shadcn.
Champ de selection deroulant pour choisir dans une liste d'options. Fait partie de la famille form dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Select a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/select.jsonSource
"use client";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "../../lib/utils";
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = ({
children,
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Trigger>>;
}) => (
<SelectPrimitive.Trigger
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
ref={ref}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="size-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
);
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>>;
}) => (
<SelectPrimitive.ScrollUpButton
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
ref={ref}
{...props}
>
<ChevronUp className="size-4" />
</SelectPrimitive.ScrollUpButton>
);
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>>;
}) => (
<SelectPrimitive.ScrollDownButton
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
ref={ref}
{...props}
>
<ChevronDown className="size-4" />
</SelectPrimitive.ScrollDownButton>
);
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = ({
children,
className,
position = "popper",
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Content>>;
}) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
)}
position={position}
ref={ref}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
);
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Label>>;
}) => (
<SelectPrimitive.Label
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
ref={ref}
{...props}
/>
);
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = ({
children,
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Item>>;
}) => (
<SelectPrimitive.Item
className={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",
className,
)}
ref={ref}
{...props}
>
<span className="absolute left-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="size-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
);
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Separator>>;
}) => (
<SelectPrimitive.Separator
className={cn("-m-1 h-px bg-muted", className)}
ref={ref}
{...props}
/>
);
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.