TextArea

import { useState } from 'react';
import { Box, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState('');

  return (
    <Box padding={8} width="100%">
      <TextArea
        id="aboutme"
        label="About me"
        onChange={({ value }) => setInput(value)}
        placeholder="Write something about yourself..."
        value={input}
      />
    </Box>
  );
}

import { useState } from 'react';
import { Box, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState('');
  return (
    <Box padding={8} width="100%">
      <TextArea
        disabled
        id="disabled"
        label="About me"
        onChange={({ value }) => setInput(value)}
        placeholder="Write something about yourself..."
        value={input}
      />
    </Box>
  );
}

import { useState } from 'react';
import { Box, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState('');

  return (
    <Box padding={8} width="100%">
      <TextArea
        errorMessage={!input ? "This field can't be blank!" : null}
        id="witherror"
        label="About me"
        onChange={({ value }) => setInput(value)}
        placeholder="Write something about yourself..."
        value={input}
      />
    </Box>
  );
}

import { useState } from 'react';
import { Box, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState(
    'To keep shopping inspirational and actionable, we set high standards for our Merchants. Your website was not approved due to fuzzy, low quality images.'
  );

  return (
    <Box padding={8} width="100%">
      <TextArea
        id="aboutmereadonly"
        label="Current errors"
        onChange={({ value }) => setInput(value)}
        readOnly
        value={input}
      />
    </Box>
  );
}

import { useState } from 'react';
import { Box, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState('');

  return (
    <Box padding={8} width="100%">
      <TextArea
        id="textareaexampleHiddenLabel"
        label="About me"
        onChange={({ value }) => setInput(value)}
        placeholder="Write something about yourself..."
        value={input}
      />
    </Box>
  );
}

import { useState } from 'react';
import { Box, Flex, Label, Text, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState('');

  return (
    <Box padding={8} width="100%">
      <Flex direction="column" gap={2} width="100%">
        <Label htmlFor="textareaExternalLabel">
          <Text size="300" weight="bold">
            About me
          </Text>
        </Label>
        <TextArea
          id="textareaExternalLabel"
          label="About me"
          labelDisplay="hidden"
          onChange={({ value }) => setInput(value)}
          placeholder="Write something about yourself..."
          value={input}
        />
      </Flex>
    </Box>
  );
}

import { useState } from 'react';
import { Avatar, Box, Flex, Text, TextArea } from 'gestalt';

export default function Example() {
  const [input, setInput] = useState('');

  return (
    <Box padding={8} width="100%">
      <Flex direction="column" gap={2} width="100%">
        <Text size="300" weight="bold">
          About me
        </Text>
        <Flex alignItems="center" gap={2} width="100%">
          <Avatar
            accessibilityLabel="Shanice, Verified account"
            name="Shanice"
            size="lg"
            src="https://i.ibb.co/7tGKGvb/shanice.jpg"
            verified
          />
          <Text size="300" weight="bold">
            Shanice
          </Text>
        </Flex>
        <TextArea
          id="textareaexampleHiddenLabel"
          label="About me"
          labelDisplay="hidden"
          onChange={({ value }) => setInput(value)}
          placeholder="Write something about yourself..."
          value={input}
        />
      </Flex>
    </Box>
  );
}

import { useState } from 'react';
import { Box, TextArea } from 'gestalt';

export default function TextAreaExample() {
  const [input, setInput] = useState('');

  return (
    <Box padding={8} width="100%">
      <TextArea
        helperText="Describe your image with detail so visually impaired users can understand your Pin"
        id="maxLength"
        label="Alt text"
        maxLength={{
          characterCount: 200,
          errorAccessibilityLabel:
            'Limit reached. You can only use 200 characters in this field.',
        }}
        onBlur={() => {}}
        onChange={({ value }) => setInput(value)}
        onFocus={() => {}}
        placeholder="Enter the image alt text"
        rows={4}
        value={input}
      />
    </Box>
  );
}

import { useState } from 'react';
import { Box, Flex, TextArea } from 'gestalt';

export default function TextAreaExample() {
  const [inputA, setInputA] = useState(
    'Before and after via side by side display of pale woman with auburn hair using concealer. The image shows her using a brush with concealer under her eyes.  The second image shows her with full makeup.'
  );
  const [inputB, setInputB] = useState(
    'Before and after via side by side display of pale woman with auburn hair using concealer. The image shows her using a brush with concealer under her eyes, second image shows her with full makeup and says new.'
  );

  const characterCount = 200;
  const errorAccessibilityLabel =
    'Limit reached. You can only use 200 characters in this field.';

  return (
    <Box padding={8} width="100%">
      <Flex direction="column" gap={6} width="100%">
        <TextArea
          helperText="Describe your image with detail so visually impaired users can understand your Pin"
          id="maxLengthReached"
          label="Alt text"
          maxLength={{ characterCount, errorAccessibilityLabel }}
          onBlur={() => {}}
          onChange={({ value }) => setInputA(value)}
          onFocus={() => {}}
          placeholder="Enter the image alt text"
          rows={4}
          value={inputA}
        />
        <TextArea
          helperText="Describe your image with detail so visually impaired users can understand your Pin"
          id="maxLengthExceeded"
          label="Alt text"
          maxLength={{ characterCount, errorAccessibilityLabel }}
          onBlur={() => {}}
          onChange={({ value }) => setInputB(value)}
          onFocus={() => {}}
          placeholder="Enter the image alt text"
          rows={4}
          value={inputB}
        />
      </Flex>
    </Box>
  );
}