FormComponentsText Field

Text Field

TextField is a reusable input component for Shaddy Form with support for icons, actions, and loading state.

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

TextField is a reusable input component for Shaddy Form. It supports labels, required state, icons, loading indicators, custom actions, and more. Use it inside a Shaddy Form to collect user input with validation.

Installation

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

Props

NameTypeDefaultDescription
namestring (from react-hook-form Path)requiredThe field name (must match your form schema).
labelstringThe label displayed above the input.
type'text' | 'email' | 'number''text'The input type.
placeholderstring'Input'Placeholder text for the input.
requiredbooleanfalseMarks the field as required.
action() => voidOptional action button on the right (e.g., clear/reset).
iconReactNodeIcon to display on the right side of the input.
loadingbooleanShows a loading spinner on the right when true.
classNamestringAdditional CSS classes for the field container.
inputClassstringAdditional CSS classes for the input element.
iconClassstringAdditional CSS classes for the icon or action button.
disabledbooleanfalseDisables the input when true.

Usage

<ShaddyForm>
  <TextField
    name="email"
    label="Email"
    type="email"
    required
    placeholder="Enter your email"
  />
</ShaddyForm>

Notes

  • The action prop adds a button on the right (e.g., for clearing the field). If icon is provided, it will be shown inside the action button; otherwise, a default X icon is used.
  • If loading is true, a loading spinner appears on the right.
Reset ButtonUnique Text Field