Skip to main content

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.

TextField is a reusable text input component that connects directly to ShaddyForm’s form context via react-hook-form. It supports labels, required indicators, optional icons, action buttons, a loading spinner, and flexible CSS overrides — all while wiring validation messages automatically through FormMessage.

​
Installation

Install all ShaddyForm fields at once with the shaddy-form registry item: 
npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

​
Usage

"use client"
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"

const schema = z.object({
  name: z.string().min(1, { message: "Name is required" }),
  email: z.string().email({ message: "Invalid email address" }),
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = { name: "", email: "" }

export default function Example() {
  return (
    <ShaddyForm
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-72">
        <TextField<FormValues>
          name="name"
          label="Name"
          placeholder="Enter your name"
        />
        <TextField<FormValues>
          name="email"
          label="Email"
          type="email"
          required
          placeholder="Enter your email"
        />
        <SubmitButton label="Submit" />
      </div>
    </ShaddyForm>
  )
}

​
Props

​
name
Path<T>
required
The field name. Must match a key in your Zod schema passed to ShaddyForm.
​
label
string
Label text rendered above the input. Omit to hide the label entirely.
​
type
'text' | 'email' | 'number'
default:"'text'"
The HTML input type. Use 'email' or 'number' to get native browser behaviour and the matching Zod validation.
​
placeholder
string
default:"'Input'"
Placeholder text shown inside the input when it is empty.
​
required
boolean
default:"false"
When true, a red asterisk is appended to the label as a visual indicator. Actual validation is controlled by your Zod schema.
​
action
() => void
Callback fired when the action button on the right side of the input is clicked. When provided, a button is rendered using the icon prop (or a default ✕ icon).
​
icon
ReactNode
An icon node to render on the right side of the input. Used as the button content when action is set, or as a static icon otherwise.
​
loading
boolean
When true, replaces the right-side icon with an animated LoadingSpinner. Useful for async operations triggered from the field.
​
disabled
boolean
default:"false"
Disables the underlying <Input> element when true.
​
className
string
Additional Tailwind / CSS classes applied to the outermost FormItem wrapper.
​
inputClass
string
Additional CSS classes applied directly to the <Input> element.
​
iconClass
string
Additional CSS classes applied to the icon container or the action button.

​
Notes

  • TextField must be rendered inside a <ShaddyForm> — it reads control from useFormContext internally.
  • The action prop and icon prop work together: if both are provided, the icon becomes the button’s content; if only icon is given, it renders as a static decoration; if only action is given, a default red ✕ icon is used.
  • Validation messages are rendered automatically below the input via shadcn/ui’s <FormMessage>.

Build docs developers (and LLMs) love

Get started for freeTalk to us