Segmented Control
Selecteur segmente a choix unique pour changer de modes, de vues ou de filtres. Installez Segmented Control depuis le registre VLLNT UI avec la CLI shadcn.
Selecteur segmente a choix unique pour changer de modes, de vues ou de filtres. 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 Segmented Control 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/segmented-control.jsonSource
"use client";
import * as React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const segmentedControlVariants = cva(
"inline-flex w-full items-center rounded-lg bg-muted p-1 text-muted-foreground",
{
defaultVariants: {
size: "default",
},
variants: {
size: {
default: "min-h-10",
lg: "min-h-11",
sm: "min-h-9",
},
},
},
);
const segmentedControlItemVariants = cva(
"inline-flex flex-1 items-center justify-center rounded-md px-3 text-sm font-medium whitespace-nowrap transition-all outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
{
defaultVariants: {
size: "default",
},
variants: {
size: {
default: "min-h-8",
lg: "min-h-9 px-4",
sm: "min-h-7 px-2.5 text-xs",
},
},
},
);
export type SegmentedControlProps = Omit<
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,
"defaultValue" | "onValueChange" | "type" | "value"
> &
VariantProps<typeof segmentedControlVariants> & {
defaultValue?: string;
onValueChange?: (value: string) => void;
value?: string;
};
export type SegmentedControlItemProps = React.ComponentPropsWithoutRef<
typeof ToggleGroupPrimitive.Item
> &
VariantProps<typeof segmentedControlItemVariants>;
const SegmentedControl = ({
className,
ref,
size,
...props
}: SegmentedControlProps & {
ref?: React.Ref<React.ComponentRef<typeof ToggleGroupPrimitive.Root>>;
}) => (
<ToggleGroupPrimitive.Root
className={cn(segmentedControlVariants({ size }), className)}
ref={ref}
type="single"
{...props}
/>
);
SegmentedControl.displayName = "SegmentedControl";
const SegmentedControlItem = ({
className,
ref,
size,
...props
}: SegmentedControlItemProps & {
ref?: React.Ref<React.ComponentRef<typeof ToggleGroupPrimitive.Item>>;
}) => (
<ToggleGroupPrimitive.Item
className={cn(segmentedControlItemVariants({ size }), className)}
ref={ref}
{...props}
/>
);
SegmentedControlItem.displayName = "SegmentedControlItem";
export {
SegmentedControl,
SegmentedControlItem,
segmentedControlItemVariants,
segmentedControlVariants,
};
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.