Components — Modern React UI Library

Examples

Basic Form Reset

Call formReset with the form element to reset all inputs and selects without a full page reload.

Basic reset

"use client";
import { useRef } from "react";
import { Button, Input, formReset } from "@g4rcez/components";

function BasicFormReset() {
  const formRef = useRef<HTMLFormElement>(null);
  return (
    <form ref={formRef} className="flex flex-col gap-4">
      <Input name="username" title="Username" placeholder="Enter username" required />
      <Input name="email" title="Email" placeholder="Enter email" required />
      <div className="flex gap-2">
        <Button type="submit" theme="success">Submit</Button>
        <Button
          type="button"
          theme="muted"
          onClick={() => formReset(formRef.current)}
        >
          Reset
        </Button>
      </div>
    </form>
  );
}

Reset with Select

formReset also clears SELECT elements back to an empty value.

With select

"use client";
import { useRef } from "react";
import { Button, Input, Select, formReset } from "@g4rcez/components";

function ResetWithSelect() {
  const formRef = useRef<HTMLFormElement>(null);
  return (
    <form ref={formRef} className="flex flex-col gap-4">
      <Input name="name" title="Name" placeholder="Full name" required />
      <Select
        name="role"
        title="Role"
        placeholder="Select a role"
        options={[
          { value: "admin", label: "Admin" },
          { value: "member", label: "Member" },
          { value: "viewer", label: "Viewer" },
        ]}
        required
      />
      <Button
        type="button"
        theme="muted"
        onClick={() => formReset(formRef.current)}
      >
        Clear form
      </Button>
    </form>
  );
}

Null-safe Call

formReset is a no-op when passed null or undefined, making it safe to call unconditionally.

Null-safe

Calling formReset(null) or formReset(undefined) is safe and performs no operation. Use it without a null check.

import { formReset } from "@g4rcez/components";

formReset(null);
formReset(undefined);

When to use formReset

Use when

You need the documented formReset interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the formReset behavior you need.

Accessibility

Keep the formReset labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.