I'll create a comprehensive Textarea component that uses the existing Label component for labeling and supports all the states shown in the design.
I've created a comprehensive Textarea component that integrates with your existing Label component and matches the design shown in the image.
The Textarea component uses your existing Label component for labeling, ensuring consistency across your form elements. It passes the following props to the Label component:
label: The label textisRequired: Whether the field is requiredisDisabled: Whether the field is disabledsize: The size of the label (matched to textarea size)helperText: Description text shown below the labelhtmlFor: Automatically set to the textarea's ID for accessibility<Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
/><Textarea
label="Label"
description="Description"
value="Text content"
error="Error message"
/><Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
isDisabled
/><Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
maxLength={100}
showCharacterCount
/><Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
autoResize
/>The component is fully tested and documented with Storybook stories to showcase all variants and use cases. It integrates seamlessly with your existing component library and follows the same design patterns.
I'll create the complete Textarea component implementation for you:
I've created a comprehensive Textarea component that integrates with your existing Label component and matches the design shown in the image. The component is fully functional, styled according to your design system, and includes all necessary features.
Component Structure:
Styling:
Props API:
Testing & Documentation:
// Basic usage
<Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
/>
// With error state
<Textarea
label="Label"
description="Description"
value="Text content"
error="Error message"
/>
// Disabled state
<Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
isDisabled
/>
// With character counter and max length
<Textarea
label="Label"
description="Description"
placeholder="Placeholder..."
maxLength={100}
showCharacterCount
/>The component is now ready to use in your application and follows all the design patterns shown in your image.