Textarea

'use client';

import { Textarea } from '@brika/clay/components/textarea';
import { useState } from 'react';

/** Controlled textarea showing a live character counter. */
export default function TextareaControlledDemo() {
  const MAX = 280;
  const [value, setValue] = useState('');
  return (
    <div className="w-full max-w-sm flex flex-col gap-1">
      <Textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        maxLength={MAX}
        placeholder="What's on your mind?"
        rows={4}
      />
      <p className="text-right text-xs text-muted-foreground">
        {value.length} / {MAX}
      </p>
    </div>
  );
}

'use client';

import { Textarea } from '@brika/clay/components/textarea';

/** Disabled textarea blocks interaction and reduces opacity. */
export default function TextareaDisabledDemo() {
  return (
    <div className="w-full max-w-sm">
      <Textarea disabled defaultValue="This field is locked and cannot be edited." />
    </div>
  );
}

'use client';

import { Textarea } from '@brika/clay/components/textarea';

/** Validation error state, aria-invalid triggers the destructive border. */
export default function TextareaInvalidDemo() {
  return (
    <div className="w-full max-w-sm flex flex-col gap-1">
      <Textarea aria-invalid="true" defaultValue="x" rows={3} />
      <p className="text-destructive text-xs">Description must be at least 20 characters.</p>
    </div>
  );
}

'use client';

import { Textarea } from '@brika/clay/components/textarea';

/** Fixed height using the rows attribute. */
export default function TextareaRowsDemo() {
  return (
    <div className="w-full max-w-sm">
      <Textarea rows={6} placeholder="Paste your content here (6 rows fixed)…" />
    </div>
  );
}