TextArea

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

export default function Example() {
  const [value, setValue] = useState('');
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Box width="100%">
        <TextArea
          id="aboutme"
          label="About me"
          onChange={(event) => setValue(event.value)}
          placeholder="Write something about yourself..."
          value={value}
        />
      </Box>
    </Box>
  );
}

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

export default function Example() {
  const [value, setValue] = useState('');
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Box width="100%">
        <TextArea
          helperText="Describe your favorite hobbies, foods, or books."
          id="aboutmemore"
          label="About me"
          onChange={(e) => setValue(e.value)}
          placeholder="Write something about yourself..."
          value={value}
        />
      </Box>
    </Box>
  );
}

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

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 2, row: 0 }} width="100%">
        <Text size="300" weight="bold">
          About me
        </Text>
        <TextArea
          id="textareaexampleHiddenLabel"
          label="About me"
          labelDisplay="hidden"
          onChange={() => {}}
          placeholder="Write something about yourself..."
        />
      </Flex>
    </Box>
  );
}

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

export default function Example() {
  const [value, setValue] = 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
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Box width="100%">
        <TextArea
          id="aboutmereadonly"
          label="Current errors"
          onChange={(data) => setValue(data.value)}
          readOnly
          value={value}
        />
      </Box>
    </Box>
  );
}

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

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

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

export default function Example() {
  const [value, setValue] = useState('');
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Box width="100%">
        <TextArea
          errorMessage={!value ? "This field can't be blank!" : null}
          id="witherror"
          label="About me"
          onChange={(e) => setValue(e.value)}
          placeholder="Write something about yourself..."
          value={value}
        />
      </Box>
    </Box>
  );
}

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

export default function TextAreaExample() {
  const [value, setValue] = useState('');
  const characterCount = 200;

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

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

export default function TextAreaExample() {
  const [valueA, setValueA] = 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 [valueB, setValueB] = 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 display="flex" height="100%" justifyContent="center" padding={8}>
      <Flex direction="column" gap={12}>
        <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 }) => setValueA(value)}
          onFocus={() => {}}
          placeholder="Enter the image alt text"
          rows={4}
          value={valueA}
        />
        <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 }) => setValueB(value)}
          onFocus={() => {}}
          placeholder="Enter the image alt text"
          rows={4}
          value={valueB}
        />
      </Flex>
    </Box>
  );
}

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

const CITIES = ['San Francisco', 'New York'];

export default function Example() {
  const [value, setValue] = useState('');
  const [tags, setTags] = useState(CITIES);

  const ref = useRef(null);

  const onChangeTagManagement = (e) => {
    // Create new tags around new lines
    const tagInput = e.value.split(/\\n+/);
    if (tagInput.length > 1) {
      setTags([
        ...tags,
        // Avoid creating a tag on content on the last line, and filter out
        // empty tags
        ...tagInput.splice(0, tagInput.length - 1).filter((val) => val !== ''),
      ]);
    }
    setValue(tagInput[tagInput.length - 1]);
  };

  const onKeyDownTagManagement = ({
    event: {
      keyCode,
      currentTarget: { selectionEnd },
    },
  }) => {
    if (keyCode === 8 /* Backspace */ && selectionEnd === 0) {
      // Remove tag on backspace if the cursor is at the beginning of the field
      setTags([...tags.slice(0, -1)]);
    }
  };

  const renderedTags = tags.map((tag, idx) => (
    <Tag
      key={tag}
      accessibilityRemoveIconLabel={`Remove ${tag} tag`}
      onRemove={() => {
        const newTags = [...tags];
        newTags.splice(idx, 1);
        setTags([...newTags]);
        ref.current?.focus();
      }}
      text={tag}
    />
  ));

  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Box width="100%">
        <TextArea
          ref={ref}
          id="cities"
          label="Cities"
          onChange={onChangeTagManagement}
          onKeyDown={onKeyDownTagManagement}
          placeholder={
            value.length > 0 || tags.length > 0 ? '' : "Cities you've lived in"
          }
          tags={renderedTags}
          value={value}
        />
      </Box>
    </Box>
  );
}

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

export default function Example() {
  const [value, setValue] = useState('');
  const [rows, setRows] = useState(2);

  return (
    <Box display="flex" height="100%" justifyContent="center" padding={8}>
      <Flex direction="column" gap={4} width="100%">
        <Box width={120}>
          <NumberField
            id="numberfield_rows"
            label="Number of Rows"
            onChange={(data) => {
              if (data.value) setRows(data.value);
            }}
            value={rows}
          />
        </Box>
        <TextArea
          id="rows"
          label="Rows example"
          onChange={(data) => {
            setValue(data.value);
          }}
          placeholder={`this text area has ${rows} rows`}
          rows={rows}
          value={value}
        />
      </Flex>
    </Box>
  );
}