PhoneInput.tsx

import React from "react";
import { InputGroup, Input, InputLeftAddon, Select } from "@chakra-ui/react";

const PhoneInput = () => {
  return (
    <InputGroup>
      <InputLeftAddon px={0} bg="transparent">
        <Select variant="filled" borderRightRadius={0}>
          <option value="+1">+1</option>
        </Select>
      </InputLeftAddon>
      <Input type="tel" />
    </InputGroup>
  );
};

export default PhoneInput;