TextField

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

export default function Example() {
  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Flex gap={{ column: 0, row: 6 }}>
        <TextField
          id="textfieldexampleA11yVisible"
          onChange={() => {}}
          label="First name"
          size="lg"
        />
        <Flex gap={{ column: 2, row: 0 }} direction="column">
          <Text weight="bold" size="300">
            First name
          </Text>
          <TextField
            id="textfieldexampleA11yHiddenLabel"
            onChange={() => {}}
            label="First name"
            labelDisplay="hidden"
            size="lg"
          />
        </Flex>
      </Flex>
    </Box>
  );
}

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

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

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Box padding={2} color="light">
        <TextField
          autoComplete="new-password"
          helperText="Password should be at least 20 characters long"
          id="variants-helper-text"
          label="Password"
          onChange={(e) => {
            setValue(e.value);
          }}
          type="password"
          value={value}
        />
      </Box>
    </Box>
  );
}

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

export default function Example() {
  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Flex gap={{ column: 2, row: 0 }} direction="column">
        <Text weight="bold" size="300">
          First name
        </Text>
        <TextField
          id="textfieldexampleHiddenLabel"
          onChange={() => {}}
          label="First name"
          labelDisplay="hidden"
          size="lg"
        />
      </Flex>
    </Box>
  );
}

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

export default function Example() {
  const [value, setValue] = useState('****maz@pinterest.com');

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <TextField
        id="variants-readonly"
        label="Email address"
        onChange={(e) => setValue(e.value)}
        placeholder="Name"
        value={value}
        readOnly
      />
    </Box>
  );
}

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

export default function Example() {
  const [password, setPassword] = useState('');

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <TextField
        id="enter-password"
        label="Account password"
        onChange={({ value }) => setPassword(value)}
        placeholder="Password"
        type="password"
        value={password}
      />
    </Box>
  );
}

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

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

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <TextField
        disabled
        id="variants-disabled"
        label="New password"
        onChange={(e) => {
          setValue(e.value);
        }}
        placeholder="6-18 characters"
        value={value}
      />
    </Box>
  );
}

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

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

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <TextField
        errorMessage={!value ? "This field can't be blank!" : null}
        id="variants-error-message"
        label="New username"
        onChange={(e) => {
          setValue(e.value);
        }}
        value={value}
      />
    </Box>
  );
}

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

export default function Example() {
  const [value, setValue] = useState('');
  const [tags, setTags] = useState(['a@pinterest.com', 'b@pinterest.com']);
  const ref = useRef(null);

  const onChangeTagManagement = (e) => {
    // Create new tags around spaces, commas, and semicolons.
    const tagInput = e.value.split(/[\\s,;]+/);
    if (tagInput.length > 1) {
      setTags([
        ...tags,
        // Avoid creating a tag on content after the separators, 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)]);
    } else if (keyCode === 13 /* Enter */ && value.trim() !== '') {
      // Create a new tag on enter
      setTags([...tags, value.trim()]);
      setValue('');
    }
  };

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

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Box padding={2} color="light">
        <TextField
          autoComplete="off"
          id="variants-tags"
          label="Emails"
          ref={ref}
          onChange={onChangeTagManagement}
          onKeyDown={onKeyDownTagManagement}
          tags={renderedTags}
          value={value}
        />
      </Box>
    </Box>
  );
}

import { useRef, useState } from 'react';
import { Box, Popover, Text, TextField } from 'gestalt';

export default function TextFieldPopoverExample() {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Box padding={2} color="light">
        <TextField
          id="variants-refs"
          label="Focus the TextField to show the Popover"
          onChange={() => {}}
          onBlur={() => {
            setOpen(false);
          }}
          onFocus={() => {
            setOpen(true);
          }}
          ref={anchorRef}
        />
        {open && (
          <Popover
            anchor={anchorRef.current}
            idealDirection="down"
            onDismiss={() => {
              setOpen(false);
            }}
            shouldFocus={false}
            size="md"
          >
            <Box padding={3}>
              <Text weight="bold">Example with Popover</Text>
            </Box>
          </Popover>
        )}
      </Box>
    </Box>
  );
}