Textarea

Source: packages/shared/components/ui/textarea.tsx

import { Textarea } from "@prosper/shared/components/ui/textarea";

Preview

Job Description

Default Styling

Min height: min-h-16 (64px)
Border: border-input
Background: bg-input-background
Focus: 3px ring in ring/50, border changes to ring
Auto-sizing: field-sizing-content (grows with content)
Font: text-base, md:text-sm

Props

Accepts all standard <textarea> HTML attributes.

Prop	Type	Default	Description
`className`	`string`	—	Additional Tailwind classes
`rows`	`number`	—	Initial visible rows
`disabled`	`boolean`	`false`	Disables input

Usage Examples

ContactPage — Message field

<Textarea
  id="message"
  name="message"
  value={formData.message}
  onChange={handleInputChange}
  placeholder="Start typing..."
  className="min-h-[120px]"
/>

Admin — JobForm — Description

<Textarea
  id="description"
  className="bg-white"
  value={formData.description}
  onChange={(e) => updateField("description", e.target.value)}
  placeholder="Describe the role..."
  rows={6}
/>

Used In

Admin: JobForm (job description)
Landing: ContactPage (message)

Notes

Override in Admin JobForm: className="bg-white" replaces the default bg-input-background to match the white-background admin form style.
Override in Landing ContactPage: className="min-h-[120px]" increases the minimum height beyond the default min-h-16 (64px) for the message field.