TextField

<Flex gap={6}>
  <TextField
    id="textfieldexampleA11yVisible"
    onChange={() => {}}
    label='First name'
    size='lg'
  />
  <Flex gap={2} direction="column">
    <Text weight="bold" size="300">First name</Text>
    <TextField
      id="textfieldexampleA11yHiddenLabel"
      onChange={() => {}}
      label='First name'
      labelDisplay="hidden"
      size='lg'
    />
  </Flex>
</Flex>

function Example(props) {
  const [value, setValue] = React.useState('');

  return (
    <Box padding={2} color="white">
      <TextField
        autoComplete="new-password"
        helperText="Password should be at least 20 characters long"
        id="variants-helper-text"
        label="Password"
        onChange={({ value }) => {
          setValue(value);
        }}
        type="password"
        value={value}
      />
    </Box>
  );
}

<Flex gap={2} direction="column">
  <Text weight="bold" size="300">First name</Text>
  <TextField
    id="textfieldexampleHiddenLabel"
    onChange={() => {}}
    label='First name'
    labelDisplay="hidden"
    size='lg'
  />
</Flex>

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

  return (
    <TextField
      id="variants-readonly"
      label="Email address"
      onChange={({ value }) => {
        setValue(value);
      }}
      placeholder="Name"
      value={value}
      readOnly
    />
  );
}

function Example(props) {
  const [value, setValue] = React.useState('');

  return (
    <TextField
      disabled
      id="variants-disabled"
      label="New password"
      onChange={({ value }) => {
        setValue(value);
      }}
      placeholder="6-18 characters"
      value={value}
    />
  );
}

function Example(props) {
  const [value, setValue] = React.useState('');

  return (
    <TextField
      errorMessage={!value ? "This field can't be blank!" : null}
      id="variants-error-message"
      label="With an error message"
      onChange={({ value }) => {
        setValue(value);
      }}
      value={value}
    />
  );
}

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

  const onChangeTagManagement = ({ value }) => {
    // Create new tags around spaces, commas, and semicolons.
    const tagInput = 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, target: { 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();
      }}
      removeIconAccessibilityLabel={`Remove ${tag} tag`}
      text={tag}
    />
  ));

  return (
    <Box padding={2} color="white">
      <TextField
        autoComplete="off"
        id="variants-tags"
        label="Emails"
        ref={ref}
        onChange={onChangeTagManagement}
        onKeyDown={onKeyDownTagManagement}
        tags={renderedTags}
        value={value}
      />
    </Box>
  );
}

function TextFieldPopoverExample() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef();

  return (
    <Box padding={2} color="white">
      <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>
  );
}