Documentation Index
Fetch the complete documentation index at: https://mintlify.com/rijvi-mahmud/shaddy/llms.txt
Use this file to discover all available pages before exploring further.
ResetButton provides a one-click way for users to clear a form and return to its starting state. It reads the form instance from useFormContext, calls form.reset() when clicked, and renders as an outlined shadcn/ui Button. Because it reads the context internally, no extra wiring is required — just drop it inside a ShaddyForm.
Installation
Install via CLI
npx shadcn@latest add https://shaddy-docs.vercel.app/r/reset-button
Or install manually
First ensure ShaddyForm is installed:npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form
ResetButton component source into your project and update import paths. Props
label
string
default:"\"Reset\""
The text displayed on the button.
When true, the button is rendered in a disabled state and clicking it has no effect.
Additional CSS classes applied to the button element, merged with the component’s defaults via cn.
onClick
(e: React.MouseEvent<HTMLButtonElement>) => void
An optional click handler called after the form has been reset. Use this for any side effects you want to trigger alongside the reset (e.g., closing a dialog, logging an event).
...props
ComponentProps<typeof Button>
All other props from the shadcn/ui Button component are forwarded, including variant, size, and HTML button attributes. Note that variant defaults to "outline" and size defaults to "sm" in the component.
How Reset Works
ResetButton calls form.reset() from react-hook-form. By default, reset() restores all field values to the initialValues provided to ShaddyForm and clears all validation errors and touched/dirty state. This is equivalent to the user never having interacted with the form.
// Internally, ResetButton does this:
const form = useFormContext();
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
form.reset(); // restore initialValues, clear errors
onClick?.(e); // call any additional handler
};
Basic Usage
import z from "zod";
import { ShaddyForm } from "@/components/form/shaddy-form";
import { TextField } from "@/components/form/fields/text-field";
import { SubmitButton } from "@/components/form/fields/submit-button";
import { ResetButton } from "@/components/form/fields/reset-button";
const profileSchema = z.object({
name: z.string().min(1, { message: "Name is required" }),
email: z.string().email({ message: "Invalid email address" }),
});
type ProfileForm = z.infer<typeof profileSchema>;
const initialValues: ProfileForm = {
name: "",
email: "",
};
export function ProfileForm() {
return (
<ShaddyForm<ProfileForm>
schema={profileSchema}
initialValues={initialValues}
onSubmit={(data) => console.log("Saved:", data)}
>
<div className="space-y-4 w-80">
<TextField<ProfileForm>
name="name"
label="Full Name"
placeholder="Enter your name"
/>
<TextField<ProfileForm>
name="email"
label="Email Address"
required
placeholder="you@example.com"
/>
<div className="flex gap-2">
<ResetButton label="Clear" />
<SubmitButton label="Save Profile" />
</div>
</div>
</ShaddyForm>
);
}
With a Post-Reset Callback
Use the onClick prop to run additional logic after the form resets — such as dismissing a dialog or resetting local component state.
import { useState } from "react";
export function EditDialog({ onClose }: { onClose: () => void }) {
const [isDirty, setIsDirty] = useState(false);
return (
<ShaddyForm
schema={schema}
initialValues={initialValues}
onSubmit={handleSave}
>
<TextField name="title" label="Title" />
<div className="flex gap-2 mt-4">
<ResetButton
label="Discard Changes"
onClick={() => {
setIsDirty(false);
onClose();
}}
/>
<SubmitButton label="Save" />
</div>
</ShaddyForm>
);
}
ResetButton resets to the initialValues passed to ShaddyForm, not necessarily to empty strings. If you pre-populate a form for editing (e.g., loading user data from an API), resetting will restore those pre-populated values — not a blank form.
Component Source (TypeScript)
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useFormContext } from "react-hook-form";
import { ComponentProps } from "react";
type Props = ComponentProps<typeof Button> & {
label?: string;
};
export const ResetButton = ({
label = "Reset",
disabled = false,
className,
onClick,
...props
}: Props) => {
const form = useFormContext();
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
form.reset();
onClick?.(e);
};
return (
<Button
type="reset"
variant="outline"
size="sm"
disabled={disabled}
className={cn(className)}
onClick={handleClick}
{...props}
>
{label}
</Button>
);
};
ResetButton.displayName = "ResetButton";
