TextArea

import { TextArea } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState('');

  return (
    <TextArea
      label="Description"
      placeholder="Enter your description..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

<TextArea
  label="Bio"
  placeholder="Tell us about yourself..."
  value={value}
  onChange={(e) => setValue(e.value)}
  maxLength={150}
/>

<TextArea
  label="Comments"
  placeholder="Start typing and watch it grow..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
  autoResize
  rows={2}
/>

<TextArea label="Short (2 rows)" rows={2} placeholder="2 rows high" />
<TextArea label="Medium (4 rows)" rows={4} placeholder="4 rows high" />
<TextArea label="Tall (8 rows)" rows={8} placeholder="8 rows high" />

<TextArea label="Normal" placeholder="Normal state" value={value} onChange={(e) => setValue(e.value)} />
<TextArea label="Disabled" placeholder="Disabled state" value={value} onChange={(e) => setValue(e.value)} disabled />
<TextArea label="Read Only" value="This is read-only content" readonly onChange={(e) => setValue(e.value)} />
<TextArea label="Required" placeholder="Required field" value={value} onChange={(e) => setValue(e.value)} required />
<TextArea label="With Error" error="This field is required" value={value} onChange={(e) => setValue(e.value)} />