TextArea

A form component for multi-line text input. Provides a consistent interface for longer text content with support for validation and accessibility features.

Props

• label: string (optional) - Label text for the textarea
• All standard HTML textarea attributes are supported

Usage Examples

Basic TextArea

import { TextArea } from 'mycrumbs-uikit';

<TextArea
  label="Description"
  placeholder="Enter a detailed description..."
/>

With Form Integration

<form onSubmit={handleSubmit}>
  <TextArea
    label="Message"
    name="message"
    required
    {...register('message')}
  />
  <button type="submit">Send</button>
</form>

With Character Count

const MaxLength = 500;

const MessageInput = () => {
  const [value, setValue] = useState('');

  return (
    <div className="space-y-1">
      <TextArea
        label="Your message"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        maxLength={MaxLength}
      />
      <div className="text-sm text-gray-500">
        {value.length}/{MaxLength} characters
      </div>
    </div>
  );
};

With Validation

<TextArea
  label="Feedback"
  error={errors.feedback}
  {...register('feedback', {
    required: 'Feedback is required',
    minLength: {
      value: 10,
      message: 'Feedback must be at least 10 characters'
    }
  })}
/>

Auto-resize

const AutoResizeTextArea = () => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = `${textarea.scrollHeight}px`;
    }
  }, [value]);

  return (
    <TextArea
      ref={textareaRef}
      label="Auto-resize content"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

Styling

The component uses Tailwind CSS for styling and includes:

• Consistent padding
• Focus states
• Error states
• Rounded corners
• Dark mode support
• Disabled styling
• Responsive height

Best Practices

1. Input Guidelines:

   • Provide clear labels
   • Set appropriate size
   • Consider character limits
   • Use placeholder text wisely

2. Validation:

   • Show clear error states
   • Validate on submit
   • Consider real-time validation
   • Provide helpful messages

3. User Experience:

   • Consider auto-resize
   • Maintain consistent width
   • Show remaining characters
   • Handle long content

Accessibility

• Proper label association
• Error announcements
• Keyboard navigation
• Focus management
• ARIA attributes
• Color contrast

Implementation Notes

• Uses React’s forwardRef
• Integrates with forms
• Supports validation
• Handles resizing
• Maintains state
• Error handling

import type { ComponentProps } from 'react';
import { forwardRef, useId } from 'react';

import { FieldError } from './Form';

interface TextAreaProps extends ComponentProps<'textarea'> {
  label?: string;
}

export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
  function TextArea({ label, ...props }, ref) {
    const id = useId();

    return (
      <label htmlFor={id}>
        {label ? <div className="label">{label}</div> : null}
        <textarea
          id={id}
          className="focus:border-brand-500 focus:ring-brand-400 w-full rounded-xl border border-gray-300 bg-white px-4 py-2 shadow-sm disabled:bg-gray-500/20 disabled:opacity-60 dark:border-gray-700 dark:bg-gray-900"
          ref={ref}
          {...props}
        />
        {props.name ? <FieldError name={props.name} /> : null}
      </label>
    );
  }
);