Inline Input
Champ de saisie en ligne avec validation et annulation au clavier. Installez Inline Input depuis le registre VLLNT UI avec la CLI shadcn.
Champ de saisie en ligne avec validation et annulation au clavier. 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 Inline Input 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/inline-input.jsonSource
"use client";
import type { KeyboardEvent } from "react";
import { cn } from "../../lib/utils";
import { Input } from "../input/input";
export type InlineInputProps = {
className?: string;
/** Called when user presses Escape or blurs without changes. */
onCancel?: () => void;
/** Called when the input value changes. */
onChange: (value: string) => void;
/** Called when user presses Enter or blurs with changes. */
onCommit: (value: string) => void;
/** Current input value. */
value: string;
};
/**
* Inline input for editing text with keyboard support.
* - Enter: commits the value
* - Escape: cancels editing
* - Blur: commits the value
*/
export function InlineInput({
className,
onCancel,
onChange,
onCommit,
value,
}: InlineInputProps) {
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
event.preventDefault();
onCommit(value);
} else if (event.key === "Escape") {
event.preventDefault();
onCancel?.();
}
};
return (
<Input
autoFocus // eslint-disable-line jsx-a11y/no-autofocus
className={cn("flex-1 h-7 text-sm", className)}
onBlur={() => {
onCommit(value);
}}
onChange={(event) => {
onChange(event.target.value);
}}
onClick={(event) => {
event.stopPropagation();
}}
onKeyDown={handleKeyDown}
value={value}
/>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.