npx shadcn@latest add https://shuip.plvo.dev/r/tsf-textarea-field.json

Preview

Multi-line text inputs are essential for longer content like descriptions, comments, or messages. TextareaField wraps a textarea element with InputGroup to enable an optional tooltip button positioned at the bottom-right corner—useful for character limits or formatting guidelines without cluttering the label area.

The component accepts native textarea props like rows and maxLength through the props parameter. Common patterns include pairing maxLength with a character counter (accessible via form.useStore) or implementing minimum length validation for meaningful input.

Built-in features

• Bottom-right tooltip positioned via InputGroup align='block-end'
• Native textarea props support (rows, maxLength, placeholder)
• Character limit validation with min/max length validators
• Multi-line error display for longer validation messages

Length validation

<TextareaField
  form={form}
  name='feedback'
  label='Feedback'
  description='Share your thoughts (10-500 characters)'
  props={{ rows: 6, maxLength: 500, placeholder: 'Your feedback...' }}
  formProps={{
    validators: {
      onChange: ({ value }) => {
        if (value.length < 10) return 'Please provide at least 10 characters'
        if (value.length > 500) return 'Maximum 500 characters allowed'
        return undefined
      }
    }
  }}
/>

Examples

Props