Textarea

A flexible textarea component for multi-line text input with support for different sizes, variants, and states.

Import

import { Textarea } from 'rebel-ui';

Usage

<script>
  import { Textarea } from 'rebel-ui';
</script>

<Textarea
  label="Message"
  placeholder="Enter your message"
/>

Sizes

The Textarea component comes in three sizes: sm, md (default), and lg.

<script>
  import { Textarea } from '@rebel-ui/core';
</script>

<div class="flex flex-col gap-4">
  <Textarea
    size="sm"
    label="Small"
    placeholder="Small textarea"
  />
  
  <Textarea
    size="md"
    label="Medium"
    placeholder="Medium textarea"
  />
  
  <Textarea
    size="lg"
    label="Large"
    placeholder="Large textarea"
  />
</div>

Variants

Three variants are available: default, filled, and ghost.

<script>
  import { Textarea } from '@rebel-ui/core';
</script>

<div class="flex flex-col gap-4">
  <Textarea
    variant="default"
    label="Default"
    placeholder="Default variant"
  />
  
  <Textarea
    variant="filled"
    label="Filled"
    placeholder="Filled variant"
  />
  
  <Textarea
    variant="ghost"
    label="Ghost"
    placeholder="Ghost variant"
  />
</div>

States

Required

Add a required indicator to the label.

<script>
  import { Textarea } from '@rebel-ui/core';
</script>

<Textarea
  label="Message"
  required
  placeholder="This field is required"
/>

Disabled

Disable user interaction.

<script>
  import { Textarea } from '@rebel-ui/core';
</script>

<Textarea
  label="Message"
  disabled
  value="This textarea is disabled"
/>

Error and Success States

Display validation states with optional error messages.

<script>
  import { Textarea } from '@rebel-ui/core';
</script>

<div class="flex flex-col gap-4">
  <Textarea
    label="Error State"
    state="error"
    errorMessage="This field is required"
    placeholder="Error state example"
  />
  
  <Textarea
    label="Success State"
    state="success"
    placeholder="Success state example"
  />
</div>

Character Count

Track input length with an optional character limit.

<script>
  import { Textarea } from '@rebel-ui/core';
</script>

<Textarea
  label="Limited Input"
  placeholder="Type something..."
  maxLength={100}
  showCount
/>

Props

Prop	Type	Default	Description
label	string	undefined	Label text for the textarea
value	string	''	Current value of the textarea
placeholder	string	undefined	Placeholder text
size	'sm' \| 'md' \| 'lg'	'md'	Size variant of the textarea
variant	'default' \| 'filled' \| 'ghost'	'default'	Visual style variant
state	'error' \| 'success'	undefined	Validation state
errorMessage	string	undefined	Error message to display
required	boolean	false	Whether the field is required
disabled	boolean	false	Whether the textarea is disabled
maxLength	number	undefined	Maximum character limit
showCount	boolean	false	Whether to show character count
rows	number	3	Number of visible text rows

Events

The component forwards all standard textarea events:

• on:input
• on:change
• on:focus
• on:blur

Styling

The Textarea component uses CSS custom properties for theming:

:root {
  --rebel-surface: #ffffff;
  --rebel-surface-secondary: #f9fafb;
  --rebel-border: #e5e7eb;
  --rebel-border-light: #f3f4f6;
  --rebel-text-primary: #111827;
  --rebel-text-secondary: #4b5563;
  --rebel-text-tertiary: #9ca3af;
  --rebel-text-disabled: #d1d5db;
  --rebel-brand: #3b82f6;
  --rebel-focus-ring: rgba(59, 130, 246, 0.25);
  --rebel-error: #ef4444;
  --rebel-error-ring: rgba(239, 68, 68, 0.25);
  --rebel-success: #22c55e;
  --rebel-success-ring: rgba(34, 197, 94, 0.25);
  --rebel-disabled-bg: #f3f4f6;
}

Accessibility

The Textarea component follows WAI-ARIA guidelines:

• Proper labeling using aria-label or <label> elements
• Error messages are linked using aria-describedby
• Disabled state is properly conveyed to assistive technologies
• Focus management with visible focus indicators