Textarea

Playground

'use client';
import { useState } from 'react';
import { Textarea } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "readOnly": false,
    "invalid": false,
    "placeholder": "Enter text.",
    "disabled": false
  };
  const [value, setValue] = useState('');
  return (
    <div style={{ width: 280, maxWidth: '100%' }}>
      <Textarea
        aria-label={"Text"}
        readOnly={settings.readOnly}
        aria-invalid={settings.invalid || undefined}
        rows={4}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        disabled={settings.disabled}
        placeholder={settings.placeholder}
      />
    </div>
  );
}

Properties

Read only

Error

Disabled

Content

Placeholder

Usage

Use value and onChange to manage the text in your app. Preserve line breaks and set any length limit.

'use client';
import { Textarea } from '@mbsw/ui';

export default function Example() {
  return (
    <Textarea
      aria-label={"Text"}
      placeholder={"Enter text."}
      rows={4}
    />
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

Textarea