Text area

import { TextArea } from '@raystack/apsara';

function App() {
  return <TextArea label="Description" placeholder="Enter description" />;
}

<TextArea
  label="Comments"
  helperText="Please provide detailed feedback"
  placeholder="Type your comments here..."
/>

<TextArea
  label="Description"
  required
  placeholder="This field is required"
/>

<TextArea
  label="Additional notes"
  required={false}
  placeholder="Optional field"
/>

<TextArea
  label="Bio"
  infoTooltip="Tell us about yourself in a few sentences"
  placeholder="Write your bio..."
/>

<TextArea
  label="Message"
  error
  helperText="Message is required"
  value=""
/>

<TextArea
  label="Feedback"
  value="This field is disabled"
  disabled
/>

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

  return (
    <TextArea
      label="Message"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      helperText={`${value.length} characters`}
    />
  );
}

<TextArea
  label="Short note"
  width="400px"
  placeholder="Enter a short note"
/>

<TextArea
  label="Description"
  rows={10}
  placeholder="Longer text area with more rows"
/>