FormComponentsText Area Field

Text Area Field

TextAreaField is a flexible reusable textarea component for Shaddy Form.

TextAreaField is a reusable textarea component for Shaddy Form. It supports labels, required state, icons, loading indicators, custom actions, auto-resizing, and more. Use it inside a Shaddy Form to collect multi-line user input with validation.

Installation

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

Props

NameTypeDefaultDescription
namestring (from react-hook-form Path)requiredThe field name (must match your form schema).
labelstringThe label displayed above the textarea.
requiredbooleanfalseMarks the field as required.
placeholderstringPlaceholder text for the textarea.
resizablebooleanfalseIf false, disables manual resizing.
autoResizebooleanfalseIf true, textarea auto-grows with content.
maxHeightnumberMaximum height for the textarea (in px).
minHeightnumberMinimum height for the textarea (in px).
action() => voidOptional action button on the right (e.g., clear/reset).
IconReactNodeIcon to display on the right side or inside the action button.
loadingbooleanShows a loading spinner on the right when true.
classNamestringAdditional CSS classes for the field container.
inputClassNamestringAdditional CSS classes for the textarea element.
iconClassNamestringAdditional CSS classes for the icon or action button.

Usage

<ShaddyForm>
  <TextAreaField
    name="summary"
    label="Summary"
    placeholder="Write something..."
    required
    autoResize
    minHeight={80}
    maxHeight={300}
  />
</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.
Unique Text FieldPassword Field