Input Group
Regroupe un champ de saisie avec des modules en tete ou en fin. Installez Input Group depuis le registre VLLNT UI avec la CLI shadcn.
Regroupe un champ de saisie avec des modules en tete ou en fin. 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 Input Group 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/input-group.jsonSource
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const inputGroupVariants = cva(
"flex w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
);
const inputGroupAddonVariants = cva(
"flex shrink-0 items-center text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0",
{
defaultVariants: {
align: "leading",
},
variants: {
align: {
leading: "pl-3",
trailing: "pr-3",
},
},
},
);
/** Container that groups an input with leading or trailing addons. */
export type InputGroupProps = React.ComponentPropsWithoutRef<"div">;
const InputGroup = ({
className,
ref,
...props
}: InputGroupProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(inputGroupVariants(), className)}
data-slot="input-group"
ref={ref}
role="group"
{...props}
/>
);
InputGroup.displayName = "InputGroup";
/** Leading or trailing addon (icon, text, or action) inside an InputGroup. */
export type InputGroupAddonProps = React.ComponentPropsWithoutRef<"div"> &
VariantProps<typeof inputGroupAddonVariants>;
const InputGroupAddon = ({
align,
className,
ref,
...props
}: InputGroupAddonProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(inputGroupAddonVariants({ align }), className)}
data-slot="input-group-addon"
ref={ref}
{...props}
/>
);
InputGroupAddon.displayName = "InputGroupAddon";
/** Borderless input that fills the remaining space inside an InputGroup. */
export type InputGroupInputProps = React.ComponentPropsWithoutRef<"input">;
const InputGroupInput = ({
className,
ref,
...props
}: InputGroupInputProps & { ref?: React.Ref<HTMLInputElement> }) => (
<input
className={cn(
"h-10 w-full flex-1 bg-transparent px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
className,
)}
ref={ref}
{...props}
/>
);
InputGroupInput.displayName = "InputGroupInput";
export {
InputGroup,
InputGroupAddon,
inputGroupAddonVariants,
InputGroupInput,
inputGroupVariants,
};
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.