FormComponentsUnique Text Field

Unique Text Field

UniqueTextField is a specialized reusable input component for Shaddy Form responsible for collecting unique user input.

⚠️ This content is not available in your language yet.

UniqueTextField is a specialized input component for Shaddy Form that checks if the entered value is unique (e.g., for usernames or emails). It provides instant feedback with a loading spinner and success/error indicators, using a debounced async check function.

Valid emails test@example.com or user@example.com

Installation

pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/unique-text-field

Props

NameTypeDefaultDescription
namestring (from react-hook-form Path)requiredThe field name (must match your form schema).
labelstringThe label displayed above the input.
placeholderstringPlaceholder text for the input.
requiredbooleanfalseMarks the field as required.
classNamestringAdditional CSS classes for the field container.
type'text' | 'email''text'The input type.
checkFunction(value: string) => Promise<boolean>requiredAsync function to check if the value is unique. Should return true if available.
debounceMsnumber1000Debounce time in milliseconds before checking uniqueness.

Usage

async function checkUsernameUnique(username: string) {
  // Replace with your API call
  return !["taken", "admin"].includes(username);
}
 
<ShaddyForm>
  <UniqueTextField
    name="username"
    label="Username"
    required
    placeholder="Enter a unique username"
    checkFunction={checkUsernameUnique}
    debounceMs={800}
  />
</ShaddyForm>;

Notes

  • The checkFunction should return a Promise that resolves to true if the value is available/unique, or false if taken.
Text FieldText Area Field